How to rotate image with CSS only?

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.

Leave a Comment