CSS: Rotate Element to 45 Degrees Code

Rotate an Element to 45° with CSS

Here’s the code to rotate HTML element to 45° using CSS. Previous Explorers can rotate elements to 90°, 180°, 270° and 360°, but they can’t rotate to some 45°. However there are special filters to do it. In IE8 trasform origin is different so I also had to fix things related to transfer origin point. Below CSS which is ready to  be used, except IE7 code, which was too ugly, but I’m including this in case you’ll want to use it 🙂

In IE8 the badge is rotating not from the center like in other browsers, but from the top, so I’m moving it back to top, and then returning it to center in IE9.

.element {
	display: block;
	position: absolute;
	top: 15px;
	right:-30px;
	top: -15px\0/; /* ie8 and 9 */
	right:-32px\0/; /* ie8 and 9 */
	width: 100px;
	-ms-transform:rotate(45deg); /* IE9 */
	-moz-transform: rotate(45deg);  /* FF3.5/3.6 */
	-o-transform: rotate(45deg);  /* Opera 10.5 */
	-webkit-transform: rotate(45deg);  /* Saf3.1+ */
	transform: rotate(45deg);  /* Newer browsers */
	/*filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); *//* IE6,IE7, but produces nasty results, so I disabled it */
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
}

:root .element { top: 15px\0/IE9; }  /* back to right value in IE9 */

The code uses CSS browsers hacks, which are presented here.