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

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 度 Angular (border:solid 1px black)不再是 90 度 Angular 。因此，我对转换的解释存在一些根本性缺陷。

那么，我怎样才能应用不受先前比例影响的旋转转换？

Answer 1

将旋转放在缩放之前，然后它会按您想要的方式工作。 [我不知道为什么会这样，它“只是有效”]

transform: rotate(45deg) scaleX(2) scaleY(1) ;

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