Can anyone help me with a CSS solution for rotating elements in IE8? I've tried some solutions that claim to work in IE8, but they're not working for me. What am I doing wrong?
Here's what I've attempted:
<!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>
If you could test your solution before providing an answer, and if possible, just make adjustments to my code example and repost the full code.
[EDIT] For those still wondering, the issue is not with the code itself, but rather the testing environment. Make sure to use real IE8 instead of an emulator in IE10/IE11 (not certain about IE9).