Wie erstelle ich einen Perspektive-Ursprung-Effekt, indem ich untergeordnete Elemente umwandle?

Question

Jun 20, 2013, 02:34 AM

internet-explorer-10 css css3 css-transforms

Wie erstelle ich einen Perspektive-Ursprung-Effekt, indem ich untergeordnete Elemente umwandle?

Also nach dem Kampf mit dem IEGlitches undInkompatibilitätenIch habe endlich meinen richtig bemessenen Quader zum Arbeiten gebracht (aktualisieren: Hier ist ein Beispiel davon). Für die Animation müssen alle Seiten separat animiert werden, anstatt nur ein einziges übergeordnetes Element. Dies scheint jedoch die einzige Möglichkeit zu sein, das Element im IE zum Laufen zu bringen.

Die Verwendung eines einzelnen Quaders funktioniert einwandfrei, mehrere Quader sind jedoch problematisch, da die Perspektive auf die einzelnen transformierten Elemente angewendet wird (was für die Arbeit im IE erforderlich ist). Sie sehen alle gleich aus, unabhängig von ihrer Position auf der Bühne:

http://jsfiddle.net/YsPmm/

Wenn die Perspektive auf die Bühne angewendet wird, befindet sich der Fluchtpunkt in der Mitte, wodurch die untergeordneten Objekte entsprechend transformiert werden. Dies versuche ich neu zu erstellen (unter Beibehaltung der IE-Kompatibilität!):

http://jsfiddle.net/kbhej/

Leider sieht es so aus, als würde es nicht funktionieren, Perspektivursprung auf die einzelnen Elemente anzuwenden. Ich frage mich, ob jemand andere Ideen hat, wie man diesen Effekt erzielen kann.

Code für die jsfiddle-Beispiele

Perspektive auf einzelne Elemente:

<!doctype html>
<html>
    <head>
        <style>
        .stage {
            width: 800px;
            height: 800px;
            background: #f6f6f6;
        }
        .wrapper, .top, .front{
            position: absolute;
            width: 200px;
            height: 200px;

            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        .wrapper:nth-child(1) {
            z-index: 4;
        }
        .wrapper:nth-child(2) {
            left: 200px;
            z-index: 3;
        }
        .wrapper:nth-child(3) {
            left: 400px;
            z-index: 2;
        }
        .wrapper:nth-child(4) {
            left: 600px;
            z-index: 1;
        }

        .top {
            background-color: #00ff00;

            -webkit-transform-origin: 50% 50% -100px;
               -moz-transform-origin: 50% 50% -100px;
                    transform-origin: 50% 50% -100px;

            -webkit-transform: perspective(200px) translateZ(-100px) rotateX(90deg) rotateX(-45deg);
               -moz-transform: perspective(200px) translateZ(-100px) rotateX(90deg) rotateX(-45deg);
                    transform: perspective(200px) translateZ(-100px) rotateX(90deg) rotateX(-45deg);
        }

        .front {
            background-color: #ff0000;

            -webkit-transform-origin: 50% 50% -100px;
               -moz-transform-origin: 50% 50% -100px;
                    transform-origin: 50% 50% -100px;

            -webkit-transform: perspective(200px) translateZ(-100px) rotateX(-45deg);
               -moz-transform: perspective(200px) translateZ(-100px) rotateX(-45deg);
                    transform: perspective(200px) translateZ(-100px) rotateX(-45deg);
        }
        </style>
    </head>
    <body>
        <div class='stage'>
            <div class='wrapper'>
                <div class='top'></div>
                <div class='front'></div>
            </div>

            <div class='wrapper'>
                <div class='top'></div>
                <div class='front'></div>
            </div>

            <div class='wrapper'>
                <div class='top'></div>
                <div class='front'></div>
            </div>

            <div class='wrapper'>
                <div class='top'></div>
                <div class='front'></div>
            </div>
        </div>
    </body>
</html>

Perspektive auf der Bühne:

<!doctype html>
<html>
    <head>
        <style>
        .stage {
            width: 800px;
            height: 800px;
            background: #f6f6f6;

            -webkit-perspective: 800px;
               -moz-perspective: 800px;
                    perspective: 800px;
        }
        .wrapper, .top, .front{
            position: absolute;
            width: 200px;
            height: 200px;

            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            backface-visibility: hidden;

            -webkit-transform-style: preserve-3d;
               -moz-transform-style: preserve-3d;
                    transform-style: preserve-3d;
        }
        .wrapper:nth-child(1) {
            z-index: 4;
        }
        .wrapper:nth-child(2) {
            left: 200px;
            z-index: 3;
        }
        .wrapper:nth-child(3) {
            left: 400px;
            z-index: 2;
        }
        .wrapper:nth-child(4) {
            left: 600px;
            z-index: 1;
        }

        .wrapper {    
            -webkit-transform: rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px);
               -moz-transform: rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px);
                    transform: rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px);
        }

        .top {
            background-color: #00ff00;
            -webkit-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 100px);
               -moz-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 100px);
                    transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 100px);
        }

        .front {
            background-color: #ff0000;
        }
        </style>
    </head>
    <body>
        <div class='stage'>
            <div class='wrapper'>
                <div class='top'></div>
                <div class='front'></div>
            </div>

            <div class='wrapper'>
                <div class='top'></div>
                <div class='front'></div>
            </div>

            <div class='wrapper'>
                <div class='top'></div>
                <div class='front'></div>
            </div>

            <div class='wrapper'>
                <div class='top'></div>
                <div class='front'></div>
            </div>
        </div>
    </body>
</html>