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

[jmyz0455]

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

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

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

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

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

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

[phy25]

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

[jmyz0455]

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