使用CSS从它的原始左上角而不是中心轴垂直旋转

Question

如何在IE8 +上垂直旋转文字

我想要垂直旋转的元素绝对定位，并且需要位于相同的位置。

<div id="parent">
   <div id="child_1">
   </div>

   <div id="child_2">
   </div>
</div>

CSS：

#parent {
position: absolute;
width: 300px;
height: 300px;
}

#child_1 {
postion: absolute;
top: 250px;
left: 50px;
width: 100px;
height: 10px;
}

#child_2 {
postion: absolute;
top: 200px;
left: 10px;
width: 100px;
height: 10px;
}

Answer 1

IE8使用过滤器有一个hack但是这需要单独为IE定位元素，但我可以忍受这个。

IE8：

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

IE9 +：

-webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);