Results 1 to 4 of 4

Thread: CSS rotation not working in IE

  1. #1
    Join Date
    Jan 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS rotation not working in IE

    I'm trying to get rotated images. The CSS below works for FF, Safari and Chrome but not for IE (typical!). Any ideas how I can get rotation happening in IE?

    Code:
    #two {float: right;
    position: relative;
    width: 200px;
    height: 200px;
    margin: 20px;
    color: #134b96; 
    padding: 5px 5px 5px 5px;
    background: #FFFFFF;
    border-width: 3px;
    border-style: solid;
    border-color: #FCF93D;
    outlineStyle: solid;
    outlineWidth: 1px;
    outline-color: #FFFFFF;
    z-index:0;
    behavior:url(-ms-transform.htc);
    -moz-transform:rotate(10deg);
    -webkit-transform:rotate(10deg);
    -o-transform:rotate(10deg);
    -ms-transform:rotate(10deg);
    }
    #two:hover {
    -moz-transform:rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -o-transform:rotate(-30deg);
    -ms-transform: rotate(-30deg);
    }
    Many thanks all!

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,920
    Thanks
    2
    Thanked 267 Times in 262 Posts

    Default

    Hi there cmr42,

    at present, only Firefox and Safari support the CSS3 transform attribute - ( I am unable to test for Chrome ).

    For IE check out...

    coothead

  3. #3
    Join Date
    Jan 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks, I thought that would be the case. I've tried this in Chrome and it does seem to work, so I guess that is a bonus! Hopefully IE will get it's ass in gear and be able to deal with CSS3 by the next release.

  4. #4
    Join Date
    Mar 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I noticed this msg on other context, and remembered I had an account at DD (but it was Coding Forums). However, now I have an account and I should answer to this.

    Most likely, you're referring to this article I wrote few months ago.

    I'm in very early stage of the process (been there for months ) for doing CSS3 support in Internet Explorer. However, if you like to use that -ms-transform -property, go ahead and check:

    http://demo.hakoniemi.net/ms-transfo...-transform.htc

    Like I said, it's very immature for general use, containing test functions etc. However, it can solve your problem with rotate transform (or transition). It also supports scale transform and accepts "opacity" instead of filter:alpha().

    For instance, Zoltan Hawryluk has made more progress on this subject: http://www.useragentman.com/blog/201...ms-even-in-ie/

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •