I need to rotate a text vertically in my HTML5-application.
This works in all browsers except IE9 and lower (couldn't test it in IE10 yet):
.badgeWrapper > h3{
-webkit-transform: rotate(-90deg) translate(-100%, 0%);
-webkit-transform-origin: 0 0 0;
-moz-transform: rotate(-90deg) translate(-100%, 0%);
-moz-transform-origin: 0 0 0;
-ms-transform: rotate(-90deg) translate(-100%, 0%);
-ms-transform-origin: 0 0 0;
-o-transform: rotate(-90deg) translate(-100%, 0%);
-o-transform-origin: 0 0 0;
transform: rotate(-90deg) translate(-100%, 0%);
transform-origin: 0 0 0;
width: 140px;
position: absolute;
}
In IE9 (no Quirksmode), the element is rotated but positioned wrong, it's displayed way too low. What am I doing wrong? The elements parent is position:relative btw.
Thanks!
SOLUTION
Sorry to solve my own question, but I had a mistake in giving transform-origin 3 values (which makes it a 3d-transform I suppose) which is not supported by IE9. Removing the last "0" solved the problem.
As supposed by @Spudley I post my solution here, so it maybe will help others with the same problem:
You must not use 3 values for IE <= 9 as those versions of IE do only support 2D-transformations, 3 values however seem to tell the browser it's an (unsupported) 3D-transform.
So this is wrong:
-ms-transform: rotate(-90deg) translate(-100%, 0%);
-ms-transform-origin: 0 0 0;
and this is right and working:
-ms-transform: rotate(-90deg) translate(-100%, 0%);
-ms-transform-origin: 0 0;
Hope it helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.