How to Rotate Image with Css Only?
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...
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>. Second, its vertical dimension will become bigger than the containing <div>.
Here is my code where the two classes are defined:
.imagetest img {
transform: rotate(270deg);
-ms-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
width: 100%;
}
.photo {
width: 95%;
padding: 0 15px;
margin: 0 0 10px 0;
float: left;
background: #828DAD;
}<article>
<section class="photo">
<div>Title</div>
<div class="imagetest">
<img src=""/>
</div>
</section>
</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.
4 Answers
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.
Give the parent a style of overflow: hidden. If it is overlapping sibling elements, you will have to put it inside of a container with a fixed height/width and give that a style of overflow: hidden.
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{
border: 1px solid #000;
transform: rotate(270deg);
-ms-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
}
.imagetest{
overflow: hidden
}<article>
<section class="photo">
<div></div>
<div class="imagetest">
<img src="" width=100%/>
</div>
</section>
</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{
border: 1px solid #000;
transform: rotate(270deg);
-ms-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
/* 455 * 111 */
margin: calc((455px - 111px)/2) calc((111px - 455px)/2);
}<article>
<section class="photo">
<div></div>
<div class="imagetest">
<img src="" />
</div>
</section>
</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);
}
Alexander Ross has covered the video game industry for a decade, writing deep dives on game design, esports tournaments, VR developments, and gaming culture.
