CSS rotate property in IE

Question

I want to rotate the DIV to a certain degree. In FF it functions but in IE I am facing a problem.

For example in the following style I can set rotation=1 to 4

 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

This means that the DIV will be rotated to 90 or 180 or 270 or 360 degree. But if I need to rotate the DIV only 20 degrees, then it doesn't work anymore.

How may I solve this problem in IE?

User · Answer

For IE11 example  browser type Trident version 7 0    image style transform    rotate 270deg

User · Answer

Just a hint    think twice before using  transform  rotate     or even  -ms-transform  rotate     IE9  with mobiles   I ve been knocking hard to the wall for days  I have a  kinetic  system going on  that slides images and  on top of it  a command area  I did  transform  on an arrow button so it simulates pointing up and down    I ve reviewd the 1 000 plus code lines for ages     -   All ok  once I removed transform rotate from the CSS  It s a bit  not to use bad words  tricky the way IE handles it  comparing to other borwsers   Great answer  Spudley  Thanks for writing it

User · Answer

There exists an on-line tool called IETransformsTranslator  With this tool you can make matrix filter transforms what works on IE6 IE7  amp  IE8  Just paste you CSS3 transform functions  e g  rotate 15deg    and it will do the rest   http   www useragentman com IETransformsTranslator

User · Answer

http   css3please com   Scroll down to   box rotate  for the Microsoft IE9  prefix  Similar discussion here  Rotating a Div Element in jQuery

User · Answer

You ll need to do a matrix transform as follows   filter  progid DXImageTransform Microsoft Matrix    M11   COS THETA    M12   -SIN THETA    M21   SIN THETA    M22   COS THETA    sizingMethod    auto expand     -ms-filter   progid DXImageTransform Microsoft Matrix    M11   COS THETA    M12   -SIN THETA    M21   SIN THETA    M22   COS THETA    SizingMethod    auto expand        Where COS THETA and SIN THETA are the cosine and sine values of the angle  i e  0 70710678 for 45 deg

User · Answer

Usefull Link for IE transform  This tool converts CSS3 Transform properties  which almost all modern browsers use  to the equivalent CSS using Microsoft s proprietary Visual Filters technology

User · Answer

To rotate by 45 degrees in IE  you need the following code in your stylesheet   filter  progid DXImageTransform Microsoft Matrix sizingMethod  auto expand   M11 0 7071067811865476  M12 -0 7071067811865475  M21 0 7071067811865475  M22 0 7071067811865476      IE6 IE7    -ms-filter   progid DXImageTransform Microsoft Matrix SizingMethod  auto expand   M11 0 7071067811865476  M12 -0 7071067811865475  M21 0 7071067811865475  M22 0 7071067811865476       IE8      You   ll note from the above that IE8 has different syntax to IE6 7  You need to supply both lines of code if you want to support all versions of IE   The horrible numbers there are in Radians  you   ll need to work out the figures for yourself if you want to use an angle other than 45 degrees  there are tutorials on the internet if you look for them    Also note that the IE6 7 syntax causes problems for other browsers due to the unescaped colon symbol in the filter string  meaning that it is invalid CSS  In my tests  this causes Firefox to ignore all CSS code after the filter  This is something you need to be aware of as it can cause hours of confusion if you get caught out by it  I solved this by having the IE-specific stuff in a separate stylesheet which other browsers didn   t load   All other current browsers  including IE9 and IE10     yay   support the CSS3 transform style  albeit often with vendor prefixes   so you can use the following code to achieve the same effect in all other browsers   -moz-transform  rotate 45deg       FF3 5 3 6    -o-transform  rotate 45deg       Opera 10 5    -webkit-transform  rotate 45deg       Saf3 1     transform  rotate 45deg       Newer browsers  incl IE9       Hope that helps   Edit  Since this answer is still getting up-votes  I feel I should update it with information about a JavaScript library called CSS Sandpaper that allows you to use  near  standard CSS code for rotations even in older IE versions   Once you   ve added CSS Sandpaper to your site  you should then be able to write the following CSS code for IE6   8   -sand-transform  rotate 40deg     Much easier than the traditional filter style you d normally need to use in IE   Edit  Also note an additional quirk specifically with IE9  and only IE9   which supports both the standard transform and the old style IE -ms-filter  If you have both of them specified  this can result in IE9 getting completely confused and rendering just a solid black box where the element would have been  The best solution to this is to avoid the filter style by using the Sandpaper polyfill mentioned above

[css] CSS rotate property in IE

The answer is

Examples related to css

Examples related to internet-explorer

Examples related to rotation

Tags