V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
jmyz0455
V2EX  ›  前端开发

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

  •  
  •   jmyz0455 · 2017-09-29 15:56:58 +08:00 · 3807 次点击
    这是一个创建于 2601 天前的主题,其中的信息可能已经有所发展或是发生改变。

    有一个父元素,使用了 css3 transform 的:

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

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

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

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

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

    phy25
        1
    phy25  
       2017-09-29 20:38:32 +08:00   ❤️ 2
    子元素改成 `transform: skewX(-30deg) rotateZ(30deg);`,显然 transform 是有顺序的。https://jsfiddle.net/zsvveq6g/
    jmyz0455
        2
    jmyz0455  
    OP
       2017-09-29 22:41:40 +08:00
    @phy25 感谢,原来还要倒序,真是没想到,亏我还挠了一晚上脑袋,谢谢了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1029 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 20:34 · PVG 04:34 · LAX 12:34 · JFK 15:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.