I would like to rotate an image by 90 degrees with CSS only. I can do the rotation, but then the position of the image is not what it should be. First, it will overlay some other elements in the same div, and second, its vertical dimension will become bigger than the containing div. Here is my code where the two classes are defined.
.imagetest img {_x000D_
transform: rotate(270deg);_x000D_
-ms-transform: rotate(270deg);_x000D_
-moz-transform: rotate(270deg);_x000D_
-webkit-transform: rotate(270deg);_x000D_
-o-transform: rotate(270deg);_x000D_
width: 100%;_x000D_
}_x000D_
_x000D_
.photo {_x000D_
width: 95%;_x000D_
padding: 0 15px;_x000D_
margin: 0 0 10px 0;_x000D_
float: left;_x000D_
background: #828DAD;_x000D_
}<article>_x000D_
<section class="photo">_x000D_
<div>Title</div>_x000D_
<div class="imagetest">_x000D_
<img src="https://picsum.photos/200/100"/>_x000D_
</div>_x000D_
</section>_x000D_
</article>Is there a way of keeping the image within the section? I can translate and scale the image so that it is within the section, but that works only, if I know the image size beforehand. I would like to have a reliable method that does not depend on the size.
This question is related to
css
image
rotation
position
translate-animation
The answer is
The trouble looks like the image isn't square and the browser adjusts as such. After rotation ensure the dimensions are retained by changing the image margin.
.imagetest img {
transform: rotate(270deg);
...
margin: 10px 0px;
}
The amount will depend on the difference in height x width of the image.
You may also need to add display:inline-block; or display:block to get it to recognize the margin parameter.
I know this topic is old, but there are no correct answers.
rotation transform rotates the element from its center, so, a wider element will rotate this way:
Applying overflow: hidden hides the longest dimension as you can see here:
img{_x000D_
border: 1px solid #000;_x000D_
transform: rotate(270deg);_x000D_
-ms-transform: rotate(270deg);_x000D_
-moz-transform: rotate(270deg);_x000D_
-webkit-transform: rotate(270deg);_x000D_
-o-transform: rotate(270deg);_x000D_
}_x000D_
.imagetest{_x000D_
overflow: hidden_x000D_
}<article>_x000D_
<section class="photo">_x000D_
<div></div>_x000D_
<div class="imagetest">_x000D_
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqVNRUwpfOwZ5n4kvVXea2VHd6QZGACVVaBOl5aJ2EGSG-WAIF" width=100%/>_x000D_
</div>_x000D_
</section>_x000D_
</article>So, what I do is some calculations, in my example the picture is 455px width and 111px height and we have to add some margins based on these dimensions:
- left margin: (width - height)/2
- top margin: (height - width)/2
in CSS:
margin: calc((455px - 111px)/2) calc((111px - 455px)/2);
Result:
img{_x000D_
border: 1px solid #000;_x000D_
transform: rotate(270deg);_x000D_
-ms-transform: rotate(270deg);_x000D_
-moz-transform: rotate(270deg);_x000D_
-webkit-transform: rotate(270deg);_x000D_
-o-transform: rotate(270deg);_x000D_
/* 455 * 111 */_x000D_
margin: calc((455px - 111px)/2) calc((111px - 455px)/2);_x000D_
}<article>_x000D_
<section class="photo">_x000D_
<div></div>_x000D_
<div class="imagetest">_x000D_
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqVNRUwpfOwZ5n4kvVXea2VHd6QZGACVVaBOl5aJ2EGSG-WAIF" />_x000D_
</div>_x000D_
</section>_x000D_
</article>I hope it helps someone!
Perform rotation using transform: rotate(xdeg) and also apply overflow: hidden to the parent component to avoid overlapping effect
.div-parent {
overflow: hidden
}
.div-child {
transform: rotate(270deg);
}
Source: Stackoverflow.com