none
Internet Explorer 9 css transform.

    Question

  • Is it possible to rotate a css block element by degrees in Internet Explorer 9 on Windows 7?

    <style type='text/css'>

    a.rotate
    {
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.5);
    }

    </style>

    I can't get this to execute!

    Will similar to

     -ms-transform:rotate(45deg);

    do the job?

    Tuesday, July 19, 2011 9:02 AM

All replies

  • -ms-transform : rotate(45deg); should do in IE 9 to rotate. It does for me with the example in http://jsfiddle.net/ppdr7/. If it does not work for you with IE 9 then you might need to ensure that the document you have is rendered in standard compliants document mode and not in quirks mode, see http://msdn.microsoft.com/en-us/ie/ff468705#_New_Document_Mode for details.
    MVP Data Platform Development My blog
    Tuesday, July 19, 2011 10:11 AM
  • Indeed, -ms-transform : rotate(45deg); works in http://jsfiddle.net/ppdr7/

    IE9 for me.  However, the following example won't.  What am I missing?

    <!---------------------------------------------------------------------------->

    <html>
    <body>
    <head>
    <style type='text/css'>

    a.rotate
    {

       /* -moz-transform:    rotate(45deg); */
       /* -webkit-transform: rotate(45deg); */
       /* -o-transform:      rotate(45deg); */
           position:   absolute;
           display:    block;     
           width:      100px;
           height:     100px;                             
           border:     1px solid black;
           top:        500px;
           left:       500px; 
       /*  -ms-transform-origin:      0% 0%;*/    
           -ms-transform:     rotate(45deg);                                           
      
    }

    </style>
    </head>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <a class='rotate'>HERE IS SOME WEB TEXT!</a>
    </body>
    </html>

    <!---------------------------------------------------------------------------->

    Wednesday, July 20, 2011 12:29 AM
  • You should validate your markup at validator.w3.org

    Learn about Doctype and IE Compatibility here.. http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx

     

    <!doctype html>
    <html>
      <head>
      <title>CSS Transforms</title>
        <style type='text/css'>
     html,body{height:100%}
    a.rotate 
    {
     
      /* -moz-transform:  rotate(45deg); */
      /* -webkit-transform: rotate(45deg); */
      /* -o-transform:   rotate(45deg); */
        position:  absolute;
        display:  block;   
        width:   100px;
        height:   100px;               
        border:   1px solid black;
        top:    500px; 
        left:    500px; 
      /* -ms-transform-origin:   0% 0%;*/   
        -ms-transform:   rotate(45deg);                      
      
    }
     
    </style>
      </head>
    <body>
      <a class='rotate'>HERE IS SOME WEB TEXT!</a>
    </body>
    </html>
    

    _


    Rob^_^
    Wednesday, July 20, 2011 3:02 AM
  • My markup is OK, however I can only find css to rotate IE9 Block Elements by 90 degrees.

    For example, what is the css call [IN IE9] which rotates this pink square by fractions (without resorting to JQuery)

    http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

    ?

    Knowing this I can use Javascript to increment the rotation argument every X milliseconds.

    ?

    Wednesday, July 20, 2011 3:16 AM
  • Actually i don't know this is hack or what but I had a same problem and 

    ms-transform:rotate(45deg); 

    above line did a trick for me.

    Monday, November 11, 2013 9:44 AM