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

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

把旋转放在刻度之前，然后它按你想要的方式工作。[我不知道为什么会这样，它"只是工作"]

变换：旋转（45度）缩放X（2）缩放Y（1）；

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