multiple images in div - css

Question

Could not find anything on this for the life of me. I simply want to display 1 little icon, multiple times on the same row,
But want to rotate each instance a bit more then the last one. So by the end of the row, the last icon is completely flipped compared to the first icon.
Here is my attempt: (thanks)
<div class="container">
<p class="one">I don't</p><p class="two">really want </p><p class="three">any</p><p class="four">words here</p>
</div>
<style>
p.one {
float:left;
image: url("http://www.itel.am/assets/ico/iconsForSocials/gl.png");
}
p.two {
float:right;
background-image: url("http://www.itel.am/assets/ico/iconsForSocials/gl.png");
transform: rotate(60deg);
}
p.three {
float:right;
background-image: url("http://www.itel.am/assets/ico/iconsForSocials/gl.png");
transform: rotate(120deg);
}
p.four {
float:right;
background-image: url("http://www.itel.am/assets/ico/iconsForSocials/gl.png");
transform: rotate(180deg);
}
</style>

Answer 1

Positioning system in a row can be achieved with 2 ways. The first and easy way is bootstrap grid system , so your problem could be solved like this
<div class="container-fluid">
<div class="col-sm-3">img</div>
<div class="col-sm-3">img</div>
<div class="col-sm-3">img</div>
<div class="col-sm-3">img</div>
</div>
Replace the img keyword i wrote with your images and transform them as you like inside css and you will be all set.
The second and more advanced way to place images in a row inside a div is position css attribute.
position:relative;
top:40px;
left:70px;
This will place the element in a specific place relative to its parent , so then you could place them wherever you want.
There are definitely more ways to do this like flexbox and more , but i totally recommend using bootstrap grid system because its easy to use and most of all responsive!

Answer 2

I think you should separate the text from rotating. something like this
<div class="container">
<p><span class="one"></span>I don't</p>
<p><span class="two"></span>really want </p>
<p><span class="three"></span>any</p>
<p><span class="four"></span>words here</p>
</div>
and in css use image as background image
.container {width:100%}
.container p { float:left; margin:0 20px}
.container p span {
width:20px; height:20px; display:block;
background: url("http://www.itel.am/assets/ico/iconsForSocials/gl.png") no-repeat left center; float:left;
}
.two { transform: rotate(60deg); }
.three { transform: rotate(120deg); }
.four { transform: rotate(180deg); }
here is the working sample