5

私は彼の親のtransform: rotateYに対抗するためにdivをすることができますか？例：親divがの場合、彼のすべての子は-45度になります。回転が影響を受けていないように見せるために子供に追加できないのはなぜですか？ デモ： http： //jsfiddle.net/eBT4A/transform: rotateY


rotateY(-45deg)
rotateY(45deg)

4

2 に答える 2

0

親divがrotateY（-45deg）を持つ子にrotateY（45deg）を追加して、これら2つの回転に同じピボットポイントを設定した場合にのみ、回転が影響を受けていないように見せることができます。

デモの例では、同じピボットポイントを適用していません。

これを試して...

<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>
于 2013-02-02T09:06:23.143 に答える
0

親に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では機能しません。

于 2013-08-27T15:23:42.390 に答える