Rotate 90 Degrees CSS

Glenn Glenn's Blog 0 Comments

If you want to rotate an element by 90 Degrees (or indeed a different degree of your choosing) then apply the following class to the element/div:-

.rotate-90 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

Here we should be covering all browsers.

Rotate Using Less

Less takes a lot of the hard work out of the above for you like so:-

.rotate(90deg);

This can easily be made into a Less Mixin:-

.rotate-90 {
.rotate(90deg);
}

How to Rotate more or less than 90 Degrees in CSS

Really easy, just replace the ’90deg’ ‘s above to a degree rotation of your choosing

About the Author
Rotate 90 Degrees CSS Rotate 90 Degrees CSS 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced WordPress Web Developer, Front-end and Back-end Developer & New Media Specialist with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries built up over a number of years.