Cool CSS3 Effects: Rotate a Block Element

Never has it been easier to rotate elements in HTML given the CSS3 standard. All it takes a few lines of CSS.
As usual, different browsers have different rule names for it Let’s get a div

to rotate itself 15°. Here we go:

div#rotated
{
	-moz-transform: rotate(15deg);		/* Applies to FireFox 3.5+ */
	-o-transform: rotate(15deg);		/* Applies to Opera 10.5 */
	-webkit-transform: rotate(15deg);	/* Applies to Safari 3.1+ and Chrome */
	-ms-transform: rotate(15deg);		/* Applies to IE9 */
}

Very simple, as you can see! And here is an example of this below:

Keep an eye on them versions and always account for people on older versions.
The XHTML code for the example above is below:

<div style="-moz-transform: rotate(15deg); -o-transform: rotate(15deg); -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); background: #0000ff; width: 200px; height: 150px; margin: 40px 0 40px 40px;">
</div>
This entry was posted in CSS and tagged , , , , , , , , , . Bookmark the permalink.