Question

在CSS3中，我正在尝试这样做：

<div style="position:absolute; 
            left:300px;
            top:300px;
            width:100px; 
            height:50px;
            border:1px solid black; 
            transform: scaleX(2) scaleY(1) rotate(45deg);  ">
    Lorem ipsum dolor sit amet.
</div>

现场演示：http://jsfiddle.net/m5ESH/1/

据我了解，它应首先将栅格/矢量水平缩放至200％垂直缩放至100％，然后将第二个变换应用于此新栅格，即将每个点旋转45度。

然而请注意90度角（边框：实心1px黑色）不再是90度。因此，我对转换的解释存在一些根本性的缺陷。

那么，如何应用不受先前比例影响的rotate转换？

Answer 1

将旋转放在刻度之前，然后它可以按照您的意愿工作。 [我没有关于为什么会这样的理论，它“只是有效”]

transform：rotate（45deg）scaleX（2）scaleY（1）;

更新：通过将基础变换矩阵相乘来应用多个变换。这意味着变换以 reverse 顺序应用。因此，无论您希望应用变换的顺序如何，请按相反的顺序列出它们，它们应该可以正常工作。

复合缩放和旋转变换会扭曲内容

1 个答案: