Menu
I'm looking for CSS solution for rotating elements in IE8. Some of solutions I've found say that it should work in IE8, but it does not for me. What I do wrong?
Here is what I tried:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.rotate {
font-weight: bold;color: #000;background: #aa0;display: block;margin: 0 auto;width: 300px;height: 300px;top: 10%;text-align: center;line-height: 300px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
</head>
<body>
<div class="rotate">
TESTING ROTATION
</div>
</body>
</html>
I would appreciate if you test your solution before answering, and it would be great ir you could just edit my given example and repost all code.
[EDIT] If anyone is still curious the problem is not the code, but the testing environment. You should use real IE8, but not IE8 emulator in IE10/IE11 (not sure about IE9)
885
You are missing IE vendor prefix -ms-
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
So, Use this
-ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* for IE8 */
Also look at this question: CSS rotate property in IE that might help you
190
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
