CSS: Rotate Element to 45 Degrees Code

Example of Rotated Element

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.

Share:
This entry was posted in CSS CheatSheets and tagged . Bookmark the permalink.

8 Responses to CSS: Rotate Element to 45 Degrees Code

  1. ritesh says:

    not working in IE8

    • Iggy says:

      I forgot to mention: enclosing element should have position:relative; display:block, an image where you’ll put the badge should have display:block, here’s the example.

  2. saib says:

    where to download full source code and see its live demo??????????

  3. Gautam Diwakar says:

    Hi, i want to transform an inage with skew at 160 deg., also able to do in all browser but noy in ie8. i am using the CSS3 code as ( -ms-filter-transform:skew(160deg,0deg); /* IE 9 */) but it is only applicable in ie9 . please provide me some web-kit for ie8 or some other solutions to resolve it.
    Thanks

  4. Mandy says:

    hi i tried and it is not working on ie8. where can i see the full source code and demo?
    Hope you can help me with it.

    Thank you!

  5. Varghese says:

    Its a nice solution for older browsers. However, I believe most of the sites do not support below IE11 anymore.. Ideally, the new Transform property works well on all the browsers and I would recommend using that.

Leave a Reply

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