複利縮放和旋轉變換歪斜內容

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）;

更新：通過將它們的基礎變換矩陣相乘來應用多個變換。這意味着變換應用於反轉的順序。因此，無論您希望轉換應用的順序如何，都要按相反順序列出，並且應該可以工作。