复合缩放和旋转变换会扭曲内容
在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 度。所以我对这些转变的解释存在一些根本性的缺陷。
那么，如何应用不受先前比例影响的旋转转换？
In CSS3, I'm trying to do this:
<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>
Live demo: http://jsfiddle.net/m5ESH/1/
As far as I understand it, it should first scale the raster/vectors to 200% horizontally and to 100% vertically and than apply the second transformation to this new raster, that is to rotate each point by 45 degrees.
However notice how the 90 degrees angles (border:solid 1px black) are not in 90 degrees any more. So there is some fundamental flaw in my interpretation of the transformations.
So, how can I apply a rotate transformation that is not affected by previous scale?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
将旋转放在比例之前，然后它就会按照您想要的方式工作。 [我没有关于为什么会出现这种情况的理论，它“只是有效”]
更新：通过将其基础变换矩阵相乘来应用多个变换。这意味着变换以相反的顺序应用。因此，无论您希望应用变换的顺序如何，请以相反的顺序列出它们，它们应该可以工作。
Put the rotate before the scale, then it works as you want it to. [I don't have the theory on why this is the case, it "just works"]
Update: multiple transforms are applied by multiplying their underlying transform matrices together. This means that the transforms are applied in reverse order. So whatever order you want your transforms applied in, list them in reverse order and they should work.