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 & 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.
This question is related to
internet-explorer
css
rotation
internet-explorer-9
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&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.
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".
Try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
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;
}
</style>
</head>
<body>
<div class="rotate">Alpesh</div>
</body>
</html>
Source: Stackoverflow.com