CSS3 transformieren 3D mit CSS3, um dynamische 3D -Würfel zu erstellen (HTML5 -Praxis)

Im heutigen Kurs werde ich Ihnen mit CSS3 vorstellen, wie 3D -Würfel erstellt werden. Sie können die tatsächlichen Effekte durch den folgenden Link durchsuchen und die linken und rechten Tasten auf und ab bedienen, um den Flip -Effekt des Würfels zu erreichen.

Beginnen wir damit, wie man es macht.

<div id = "experiment">

<div id = "cube">

<div>

Ein Gesicht

</div>

<div>

Hoch, runter, links, rechts

</div>

<div>

Lorem Ipsum.

</div>

<div>

Neue Formen der Navigation machen Spaß.

</div>

<div>

3D -Würfel rotieren

</div>

<div>

Mehr Inhalt

</div>

</div>

</div>

In der obigen HTML repräsentieren die 6 Divs mit der Klasse als Gesicht die 6 Gesichter des Würfels, und sie unterscheiden sich mit den Klassennamen von eins bis sechs. Der externe Behälter enthält zwei Schichten von Behältern mit ID -Würfel und Experiment. Beide Schichten sind notwendig. Ohne einen kann der 3D -Effekt nicht erzeugt werden.

Unter ihnen spielt das Experiment die Rolle der Linse. Stellen Sie die Brennweite so ein, dass der 3D -Effekt auf den internen Elementen angezeigt werden kann.

Das Perspektivattribut definiert die Tiefe der Z-Achse-Ebene und definiert auch die relativen Dimensionen von Elementen über und unterhalb der Ebene. Je kleiner der Perspektivwert ist, desto größer ist das Objekt umso näher. Je größer der Perspektivwert ist, desto kleiner das Objekt, desto weiter von Ihnen entfernt. Sie können den Effekt über http://www.webkit.org/blog-files/3d-transforms/perspective-by-plample.html anzeigen.

Das Eigentum der Perspektivenorientin definiert den Ursprung der Perspektive.

#Experiment {

-Webkit-Perspektive: 800;

-moz-perspektive: 800;

-O-Perspektive: 800;

Perspektive: 800;

-Webkit-Perspektive-Origin: 50% 200px;

-moz-perspektive-Origin: 50% 200px;

-O-Perspektive-Origin: 50% 200px;

Perspektiven-Ursprung: 50% 200px;

}

Die vom Würfel festgelegten Eigenschaften enthalten eine feste Breite und Höhe und setzen die Position auf Relativ. Feste Höhe und Breite sind erforderlich, damit Elemente im Würfel 3D -Animationen in einem definierten Bereich durchführen können. Wenn Sie die Höhe und Breite auf 100%festlegen, bewegen sich die Elemente im Würfel über den gesamten Seitenbereich.

Der Übergang wird verwendet, um animationsbezogene Eigenschaften festzulegen. Transform-Stil: Preserve-3d; Bringt alle Elemente im Würfel produzieren 3D -Effekte insgesamt.

Sie können http://www.zhangxinxu.com/wordpress/2012/09/css3/">css3-3d-transform-perspektive-animate-transition/ durchsuchen.

CSS:

#cube {

Position: Relativ;

Rand: 100px Auto;

Höhe: 400px;

Breite: 400px;

-Webkit-Übergang: -Webkit-Transformation 2S linear;

-moz-transition: -moz-transform 2S linear;

-O-Übergang: -O-Transformation 2S linear;

Übergang: 2S linear;

-Webkit-Transform-Stil: Preserve-3d;

-moz-transformiert: Preserve-3d;

-O-Transform-Stil: Preserve-3d;

Transform-Stil: Preserve-3d;

}

Setzen Sie als nächstes das CSS -Attribut für die 6 Gesichter des Würfels.

.Gesicht {

Position: absolut;

Höhe: 360px;

Breite: 360px;

Polsterung: 20px;

Hintergrundfarbe: RGBA (50, 50, 50, 0,7);

}

Setzen Sie als nächstes die 3D-verwandten Eigenschaften der 6 Gesichter, verwenden Sie Rotatex oder Rotatey, um den Flip der Würfeloberfläche zu erreichen, und verwenden Sie TranslateZ, um die Bewegung der Würfeloberfläche im dreidimensionalen Raum zu erreichen.

#cube .one {

-Webkit-transform: rotatex (90 °) translatez (200px);

-moz-transform: rotatex (90de) translatez (200px);

-O-transform: rotatex (90 °) translatez (200px);

Transformation: rotatex (90de) translatez (200px);

}

#cube .two {

-Webkit-Transformation: Translatez (200px);

-moz-transform: translatez (200px);

-O-Transformation: Translatez (200px);

Transformation: Translatez (200px);

}

#cube .Three {

-Webkit-transform: rotatey (90de) translatez (200px);

-moz-transform: rotatey (90de) translatez (200px);

-O-Transformation: Rotatey (90 °) Translatez (200px);

Transformation: Rotatey (90 °) Translatez (200px);

}

#cube .four {

-Webkit-transform: rotatey (180de) translatez (200px);

-moz-transform: rotatey (180 °) translatez (200px);

-O-transform: rotatey (180 °) translatez (200px);

Transformation: Rotatey (180 °) Translatez (200px);

}

#cube .five {

-Webkit-transform: rotatey (-90de) translatez (200px);

-moz-transform: rotatey (-90de) translatez (200px);

-O-transform: rotatey (-90de) translatez (200px);

Transformation: rotatey (-90de) translatez (200px);

}

#cube .Six {

-Webkit-transform: rotatex (-90de) translatez (200px);

-moz-transform: rotatex (-90de) translatez (200px);

-O-transform: rotatex (-90de) translatez (200px);

Transformation: rotatex (-90de) translatez (200px);

}

Das Letzte, was Sie tun müssen, ist, das Schlüsseldown -Ereignis an die Seite zu binden, sodass beim Drücken der nach oben-, unten-, linke und rechten und rechten Tasten drücken, der Cube -Flip -Bewegungseffekt erreicht wird.

JavaScript:

var xangle = 0, jangle = 0;

document.addeventListener ('keydown', function (e)

{

Switch (E.Keycode)

{

Fall 37: // links

jangle -= 90;

brechen;

Fall 38: // Up

xangle += 90;

brechen;

Fall 39: // Recht

Yangle += 90;

brechen;

Fall 40: // unten

xangle -= 90;

brechen;

};

$ ('cube'). style.webkittransform = "rotatex ("+xangle+"deg) rotatey ("+yangle+"Deg);

}, FALSCH);

Das ist alles für den Kurs, Sie können es als nächstes ausprobieren.