Geek asks and answers

CSS3 transform: rotateY a div to resist parent rotation

Can I transform: rotateYdisable the div for transform: rotateYmy parent?

For example: if I have a parent div with rotateY(-45deg), all of its children will be -45deg.
Why can't I add rotateY(45deg)to the kids to make it look like no rotation affected it?

Demo: http://jsfiddle.net/eBT4A/

+5
source share
2 answers

You can add rotateY (45deg) to the children, where the parent div has rotateY (-45deg) so that it looks as if no rotation affected it only when you set the same pivot on these two rotations,

in your demo, you didn’t apply the same fulcrum,

Try it...

<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>
0
source

You need to add save-3d to the parent object:

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);
}

updated violin

As far as I know, this will not work in IE.

0
source

More articles:


All Articles