父元素中同时使用 css3 transform 的 rotate 和 skew 后，子元素如何不受影响？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2613 天前的主题，其中的信息可能已经有所发展或是发生改变。

有一个父元素，使用了 css3 transform 的：

transform: rotateZ(-30deg) skewX(30deg);

结果这个元素的（与父元素宽高不相等的）子元素受到了影响，也旋转扭曲了。现在我想让子元素不受旋转扭曲，变回原来矩形的样子。于是我给子元素使用：

transform: rotateZ(30deg) skewX(-30deg);

答案是无法还原，子元素似乎扭曲更严重了。我发现父元素单独使用 rotate 或 skew 后，子元素都能用负值还原，但是唯独同时使用 rotate 和 skew 后，子元素无法还原。

详情可以看我这个 Demo，请各位帮忙解答一下。

2 条回复

phy25

2017-09-29 20:38:32 +08:00

子元素改成 `transform: skewX(-30deg) rotateZ(30deg);`，显然 transform 是有顺序的。https://jsfiddle.net/zsvveq6g/

jmyz0455

2017-09-29 22:41:40 +08:00

@phy25 感谢，原来还要倒序，真是没想到，亏我还挠了一晚上脑袋，谢谢了。