Internet Explorer Developer Center >
> 
> 
Internet Explorer 9 css transform.

Unanswered Internet Explorer 9 css transform.

  • Tuesday, July 19, 2011 9:02 AM
     
     
    Sign In to Vote
    0

    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?

     

All Replies

  • Tuesday, July 19, 2011 10:11 AM
     
     
    Sign In to Vote
    0
    -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
     
  • Wednesday, July 20, 2011 12:29 AM
     
     
    Sign In to Vote
    0

    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 3:02 AM
     
      Has Code
    Sign In to Vote
    0

    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:16 AM
     
     
    Sign In to Vote
    0

    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.

    ?