33

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!

6
  • 3
    A google search would have given you your answer: answers.oreilly.com/topic/1004-how-to-rotate-an-image-with-css
    – Ayush
    Aug 6, 2012 at 16:20
  • 3
    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 6, 2012 at 16:27
  • You'd better use 4 different images as CSS transforms won't work in IE 7 and IE 8. Aug 6, 2012 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 6, 2012 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, 2012 at 18:44

1 Answer 1

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

4
  • 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 6, 2012 at 16:54
  • 6
    This is exactly why CSS sucks. Lack of standards is the standard.
    – janek37
    Sep 2, 2013 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, 2014 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, 2015 at 21:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.