CSS 元素旋转答案

【问题标题】：CSS element rotationCSS 元素旋转
【发布时间】：2014-02-27 01:50:17
【问题描述】：

我是初学者

我用动态文本内容（侧边栏）将 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);

我已经设置了一个固定位置到“旁边”，顶部和左侧以及负边距。

【问题讨论】：

对不起，我不知道你在说什么。 “向右移动增加文本”？
如果可能的话，给我们一个 jsfiddle

标签： html css rotation margin

【解决方案1】：

您的问题在于 Transform Origin 的属性，它定义了：

元素变换的起源

默认值为50% 50%，那么如果您以动态方式增加元素的大小，旋转的原点会发生变化，当然“向右移动”，因为该点是实际大小的 50% .

您可以将其定义为更灵活的动态尺寸，试试这个：

-webkit-transform-origin: 0 100%;

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

查看此演示http://jsfiddle.net/qgG8b/。

【讨论】：