How to rotate image with CSS only?

Question

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="https://picsum.photos/200/100"/>
    </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.

score 35 · Answer 1 · answered Nov 05 '14 at 00:42

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.

score 12 · Accepted Answer · answered Dec 02 '12 at 21:34

12

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.

answered Dec 02 '12 at 21:34

HellaMad

5,294
6
31
53

score 12 · Answer 3 · answered Jan 29 '19 at 15:54

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="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqVNRUwpfOwZ5n4kvVXea2VHd6QZGACVVaBOl5aJ2EGSG-WAIF" 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="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqVNRUwpfOwZ5n4kvVXea2VHd6QZGACVVaBOl5aJ2EGSG-WAIF" />
</div>
</section>
</article>

I hope it helps someone!

score 2 · Answer 4 · answered Sep 15 '20 at 07:13

2

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);
}

answered Sep 15 '20 at 07:13

Codemaker2015

12,190
6
97
81

How to rotate image with CSS only?

4 Answers4

Linked