CSS元素旋转

Question

我是初学者

我已经用动态文本内容（侧栏）旋转了Div 90度，但是，当我增加文本时，它是正确的，这是我的问题，需要保持左侧的固定位置。这是我的代码：

<div id="aside"> 
    <a href="">
        <span id="up-image"></span>
        <span id="dragg">zi dragg</span>
        <span id="down-image"></span>   
    </a>    
</div>

..以及我使用的旋转：

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')"; /* IE6-8 */
-ms-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform: rotate(90deg);  
-moz-transform: rotate(90deg);

我已将固定位置设置在顶部和左侧和负边缘的"一边"。

Answer 1

您的问题与属性Transform Origin定义：

元素转换的起源

和默认值为 50% 50%，则如果以动态方式增加元素的大小，则旋转的原点变化的原点，当然"向右移动"，因为该点是实际大小的50％。<<<<<<<<<<<</p>

您可以将其定义为具有动态大小的灵活性，请尝试以下操作：

-webkit-transform-origin: 0 100%;  

_{不要忘记包括所有供应商前缀}

检查此演示http://jsfiddle.net/qgg8b/。