How to rotate image with CSS only?
css, image, rotation
Solution
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`.
Problem
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.