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:-

[css]
.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);
}
[/css]

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:-

[css]
.rotate(90deg);
[/css]

This can easily be made into a Less Mixin:-

[css][/css]
.rotate-90 {
.rotate(90deg);
}
[css][/css]

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.

Leave a Reply

Your email address will not be published. Required fields are marked *