CSS3’s transform property makes it easy to rotate any HTML element using only code.
Below we have a div that’s screaming: “Rotate Me!”
All we need to rotate this div is one line of CSS:
- transform: rotate(10deg);
This one simple line transforms the div above into one that’s tilted 10 degrees to the right.
Divs aren’t the only thing that can be rotated, however. CSS’s transform property can be applied to virtually any HTML element. For example, what if we wanted to keep the div level, but rotate the H1 text “I’m Rotated!”
The same basic syntax would apply:
- h1{
- transform: rotate(5deg);
- }
Rotate an element to the left by putting a “–” before the degree of rotation.
The transform property is only supported by newer browsers, so it’s probably a good idea to use the -webkit- and -moz- prefixes along with it to ensure cross-browser compatibility.