Cross browser way to rotate image using CSS?

Question

I have a site layout I'm working on that has a main content area and then at each of the four corners of the content area sits a corner graphic. The overall effect is that of a desk blotter.

Here is the code for my top left hand corner:

.corner-top-left    { width:96px ;
height:96px ;
background:url("images/corner.png") no-repeat ;
position:absolute ;
top:-5px ;
left:-5px ;
z-index:3000 ;
}

Rather than make four individual corner images, what I would like to do (if possible) is use the original image (corner.png) and rotate it using CSS.

Is there a cross browser compatible way to do this?

Many thanks!

A google search would have given you your answer: http://answers.oreilly.com/topic/1004-how-to-rotate-an-image-with-css/ — Ayush, Aug 06 '12 at 16:20
I did search google first. That link didn't show up anywhere in the first 10 *pages* of results I looked through (search term was 'css rotate background image'). Since many of the examples I *did* see weren't cross browser compatible, I came here. Thx for the link though. — Cynthia, Aug 06 '12 at 16:27
You'd better use 4 different images as CSS transforms won't work in IE 7 and IE 8. — Ihor Deyneka, Aug 06 '12 at 16:37
Thanks for the caveat, Ihor. In IE8, the rotation worked great but it played hell with the shadow transparency of my image. Gah. separate images it is then :) — Cynthia, Aug 06 '12 at 16:43
Why not making a single image containing the four corners and using an offset to display only the required one? I see this technique used all the time. — Diego, Aug 19 '12 at 18:44

score 55 · Accepted Answer · edited May 23 '17 at 12:17

55

http://jsfiddle.net/tJkgP/2/

CSS to rotate by 45 degrees:

.desk
{
    width: 50%;
    height: 400px;
    margin: 5em auto;
    border: solid 1px #000;
    overflow: visible;
}
.desk img
{
    behavior:url(-ms-transform.htc);
    /* Firefox */
    -moz-transform:rotate(45deg);
    /* Safari and Chrome */
    -webkit-transform:rotate(45deg);
    /* Opera */
    -o-transform:rotate(45deg);
    /* IE9 */
    -ms-transform:rotate(45deg);
    /* IE6,IE7 */
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);
    /* IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; 

}

IE6-8 CSS came from here: CSS rotate property in IE

edited May 23 '17 at 12:17

Community

1
1

answered Aug 06 '12 at 16:46

Alex W

37,233
13
109
109

This will work great with images that have no transparent elements in them! Thank you :) I make that distinction only because I checked the jfiddle in IE8 and it was playing hell w/ the shadow and transparency. That's IE for you though. Thanks again! – Cynthia Aug 06 '12 at 16:54
6

This is exactly why CSS sucks. Lack of standards is the standard. – janek37 Sep 02 '13 at 14:02
@janek37 it is lacking and explicitly in this case there is NO standard. It would be nice to have a standard `rotate(45deg);` as a banner for all the browser specific ones. – 23inhouse Feb 17 '14 at 10:29
1

Would be good to know where does the behavior htc file comes from... and what role plays in the indicated script. – j4v1 Dec 23 '15 at 21:50

Cross browser way to rotate image using CSS?

1 Answers1

Linked

Related