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

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

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

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

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

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

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