CSS3 transform rotate in IE9

Question

I have an element that needs to be vertical in a design I have done  I have got the css for this to work in all browsers except IE9  I used the filter for IE7  amp  IE8   progid DXImageTransform Microsoft BasicImage rotation 3     This however seems to render my element transparent in IE9 and the CSS3  tranform  porperty doesn t seem to do anything   Does anyone know anyway of rotating elements in IE9   Really appreciate the help   W

User · Answer

I also had problems with transformations in IE9  I used -ms-transform  rotate 10deg  and it didn t work  Tried everything I could  but the problem was in browser mode  to make transformations work  you need to set compatibility mode to  Standard IE9

User · Answer

I know this is old  but I was having this same issue  found this post  and while it didn t explain exactly what was wrong  it helped me to the right answer - so hopefully my answer helps someone else who might be having a similar problem to mine   I had an element I wanted rotated vertical  so naturally I added the filter  for IE8 and then the -ms-transform property for IE9  What I found is that having the -ms-transform property AND the filter applied to the same element causes IE9 to render the element very poorly  My solution    If you are using the transform-origin property  add one for MS too  -ms-transform-origin  left bottom    If you don t see your element  it could be that it s rotating on it s middle axis and thus leaving the page somehow - so double check that  Move the filter  property for IE7 amp 8 to a separate style sheet and use an IE conditional to insert that style sheet for browsers less than IE9  This way it doesn t affect the IE9 styles and all should work fine  Make sure to use the correct DOCTYPE tag as well  if you have it wrong IE9 will not work properly

User · Answer

Standard CSS3 rotate should work in IE9  but I believe you need to give it a vendor prefix  like so     -ms-transform  rotate 10deg     It is possible that it may not work in the beta version  if not  try downloading the current preview version  preview 7   which is a later revision that the beta  I don t have the beta version to test against  so I can t confirm whether it was in that version or not  The final release version is definitely slated to support it   I can also confirm that the IE-specific filter property has been dropped in IE9    Edit  People have asked for some further documentation  As they say  this is quite limited  but I did find this page  http   css3please com  which is useful for testing various CSS3 features in all browsers   But testing the rotate feature on this page in IE9 preview caused it to crash fairly spectacularly   However I have done some independant tests using -ms-transform rotate   in IE9 in my own test pages  and it is working fine  So my conclusion is that the feature is implemented  but has got some bugs  possibly related to setting it dynamically   Another useful reference point for which features are implemented in which browsers is www canIuse com -- see http   caniuse com  search rotation   EDIT  Reviving this old answer because I recently found out about a hack called CSS Sandpaper which is relevant to the question and may make things easier   The hack implements support for the standard CSS transform for for old versions of IE  So now you can add the following to your CSS   -sand-transform  rotate 10deg        and have it work in IE 6 7 8  without having to use the filter syntax   of course it still uses the filter syntax behind the scenes  but this makes it a lot easier to manage because it s using similar syntax to other browsers

User · Answer

Try this   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt   lt title gt Untitled Document lt  title gt   lt style type  text css  gt  body       margin-left  50px      margin-top  50px      margin-right  50px      margin-bottom  50px     rotate       font-family  Arial  Helvetica  sans-serif      font-size  16px      -webkit-transform  rotate -10deg       -moz-transform  rotate -10deg       -o-transform  rotate -10deg       -ms-transform  rotate -10deg       -sand-transform  rotate 10deg       display  block      position  fixed     lt  style gt   lt  head gt    lt body gt   lt div class  rotate  gt Alpesh lt  div gt   lt  body gt   lt  html gt

[internet-explorer] CSS3 transform: rotate; in IE9

Examples related to internet-explorer

Examples related to css

Examples related to rotation

Examples related to internet-explorer-9