rotate image with css

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  and second  its vertical dimension will become bigger than the containing div  Here is my code where the two classes are defined    x000D   x000D   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    x000D   lt article gt  x000D     lt section class  photo  gt  x000D       lt div gt Title lt  div gt  x000D       lt div class  imagetest  gt  x000D         lt img src  https   picsum photos 200 100   gt  x000D       lt  div gt  x000D     lt  section gt  x000D   lt  article gt  x000D   x000D   x000D    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

User · Answer

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

User · Answer

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

User · Answer

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      x000D   x000D  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    x000D   lt article gt  x000D   lt section class  photo  gt  x000D   lt div gt  lt  div gt  x000D   lt div class  imagetest  gt  x000D   lt img src  https   encrypted-tbn0 gstatic com images q tbn ANd9GcSqVNRUwpfOwZ5n4kvVXea2VHd6QZGACVVaBOl5aJ2EGSG-WAIF  width 100   gt  x000D   lt  div gt  x000D   lt  section gt  x000D   lt  article gt  x000D   x000D   x000D    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      x000D   x000D  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    x000D   lt article gt  x000D   lt section class  photo  gt  x000D   lt div gt  lt  div gt  x000D   lt div class  imagetest  gt  x000D   lt img src  https   encrypted-tbn0 gstatic com images q tbn ANd9GcSqVNRUwpfOwZ5n4kvVXea2VHd6QZGACVVaBOl5aJ2EGSG-WAIF    gt  x000D   lt  div gt  x000D   lt  section gt  x000D   lt  article gt  x000D   x000D   x000D    I hope it helps someone

User · Answer

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

[css] rotate image with css

Examples related to css

Examples related to image

Examples related to rotation

Examples related to position

Examples related to translate-animation