有一个父元素,使用了 css3 transform 的:
transform: rotateZ(-30deg) skewX(30deg);
结果这个元素的(与父元素宽高不相等的)子元素受到了影响,也旋转扭曲了。现在我想让子元素不受旋转扭曲,变回原来矩形的样子。于是我给子元素使用:
transform: rotateZ(30deg) skewX(-30deg);
答案是无法还原,子元素似乎扭曲更严重了。我发现父元素单独使用 rotate 或 skew 后,子元素都能用负值还原,但是唯独同时使用 rotate 和 skew 后,子元素无法还原。
详情可以看我这个 Demo,请各位帮忙解答一下。
1
phy25 2017-09-29 20:38:32 +08:00 2
子元素改成 `transform: skewX(-30deg) rotateZ(30deg);`,显然 transform 是有顺序的。https://jsfiddle.net/zsvveq6g/
|