Возникла необходимость динамически поворачивать изображения, сверстанные через flexbox, собственно тут выяснилось, что после поворота изображения, для внешнего мира оно все так же продолжает занимать тоже самое положение. Как поведать всем о повороте? Пример: https://jsfiddle.net/x4f1xxqa/1/.
.content {
display: flex;
flex-direction: row;
align-content: flex-start;
flex-wrap: wrap;
}
.element {
margin: 5px;
}
.img {
width: 30px;
height: 60px;
background-color: red;
}
#img {
position: relative;
}
#test {
background-color: black;
}
.rotated {
transform: rotate(90deg);
}
<div class='content'>
<div class='element'>
<div class='img'>
</div>
</div>
<div class='element'>
<img id='img' class='rotated' width=100px src='http://www.sunhome.ru/UsersGallery/032011/kotiki-foto.jpg'>
</div>
<div class='element'>
<div class='img'>
</div>
</div>
<div class='element'>
<div class='img'>
</div>
</div>
<div class='element rotated'>
<div class='img' id='test'>
</div>
</div>
<div class='element'>
<div class='img'>
</div>
</div>
</div>