CSS3 转换:旋转 Y 一个 div 以抵消父级的 rotateY

我可以transform: rotateYdiv来对抗他父母的transform: rotateY吗？

例如：
如果我有一个带有 rotateY(-45deg) 的父div，他的所有孩子都将是 -45deg。
为什么我不能向子项添加rotateY(45deg)，使其看起来没有旋转影响它？

演示：http://jsfiddle.net/eBT4A/

您可以将 rotateY（45deg）添加到父div 具有 rotateY（-45deg）的子项中，使其看起来只有当您将相同的枢轴点设置为这两个旋转时才影响它，

在您的演示示例中，您没有应用相同的枢轴点，

试试这个...

<html>
    <head>
        <style type="text/css">
            body {
                -webkit-perspective: 500;
            }
            #content {
                position:absolute;
                top: 0px;
                left: 0px;
                width: 300px; 
                height: 500px;
                background: #000;
                -webkit-transform-origin: 0px 0px;
                -webkit-transform: rotate(45deg);
                -moz-transform-origin: 0px 0px;
                -moz-transform: rotate(45deg);
            }
            #element {
                position:absolute;
                top: 0px;
                left: 0px;
                width: 50px; 
                height: 50px;
                background: #f00;
                -webkit-transform-origin: 0px 0px;
                -webkit-transform: rotate(-45deg);
                -moz-transform-origin: 0px 0px;
                -moz-transform: rotate(-45deg);
            }
        </style>
    </head>
    <body>
        <div id="content">
            <div id="element"></div>
        </div>
    </body>
</html>

您需要

将 preserve-3d 添加到父级：

body {
    -webkit-perspective: 500;
}
#content {
    position:fixed;
    top: 20px;
    left: 0;
    width: 300px; 
    height: 500px;
    background: #000;
    -webkit-transform-origin: 0 0;
    -webkit-transform: rotateY(45deg);
    -webkit-transform-style: preserve-3d;
}
#element {
    position:fixed;
    top: 20px;
    left: 50%;
    width: 50px; 
    height: 50px;
    background: #f00;
    -webkit-transform-origin: 0 0;
    -webkit-transform: rotateY(-45deg);
}

更新的小提琴

据我所知，这在IE中不起作用。

相关内容

最新更新

热门标签：