suchen

Heim  >  Artikel  >  Web-Frontend  >  CSS3-Transformation 3D Verwenden Sie CSS3, um einen dynamischen 3D-Würfel zu erstellen (HTML5-Übung)_HTML5-Tutorial-Fähigkeiten

CSS3-Transformation 3D Verwenden Sie CSS3, um einen dynamischen 3D-Würfel zu erstellen (HTML5-Übung)_HTML5-Tutorial-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:50:371227Durchsuche

Im heutigen Kurs werde ich Ihnen vorstellen, wie Sie mit CSS3 einen 3D-Würfel erstellen. Sie können den tatsächlichen Effekt über den Link unten durchsuchen und die Aufwärts-, Abwärts-, Links- und Rechts-Tasten betätigen, um den Würfelumdrehungseffekt zu erzielen.
Demo-Adresse: http://www.jb51.net/jiaoben/70022.html
Beginnen wir mit der Herstellung.
html:

Kopieren Sie den Code
Der Code lautet wie folgt:

>
Nach oben, unten, links, rechts
>
Lorem ipsum
>

Rotierender 3D-Würfel
/div>



Im obigen HTML stellen die 6 Divs mit Klassenfläche jeweils die 6 Seiten des Würfels dar Von einem bis sechs Namen unterscheiden sie sich. Die Außenseite enthält zwei Schichten von Behältern mit den IDs „Würfel“ und „Experiment“. Ohne eine der beiden Schichten kann der 3D-Effekt nicht erzeugt werden.
Das Experiment spielt die Rolle einer Linse. Setzen Sie den Fokus darauf, sodass der 3D-Effekt auf den inneren Elementen angezeigt wird. Das Attribut
Perspektive definiert die Tiefe der Z-Achsen-Ebene und definiert außerdem die relativen Größen von Elementen oberhalb und unterhalb der Ebene. Im Allgemeinen gilt: Je kleiner der Perspektivwert, desto größer ist das Objekt und je näher es an Ihnen ist; je größer der Perspektivwert, desto kleiner ist das Objekt und desto weiter ist es von Ihnen entfernt. Sie können den Effekt unter http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html überprüfen.
Das Attribut perspective-origin definiert den Ursprung der Perspektive.

css
:





Code kopieren


Der Code lautet wie folgt:


#experiment { -webkit-perspective: 800; -o-perspective: 800;
-webkit -perspective-origin: 50% 200px;-moz-perspective-origin: 50% 200px; >}
Die von Cube festgelegten Eigenschaften enthalten eine feste Breite und Höhe, und die Position ist auf relativ festgelegt. Damit die Elemente im Würfel innerhalb eines begrenzten Bereichs 3D-Animationen ausführen können, sind feste Höhe und Breite erforderlich. Wenn Sie Höhe und Breite auf 100 % einstellen, werden die Elemente im Würfel über die Seite verschoben. Übergang wird verwendet, um animationsbezogene Attribute festzulegen. transform-style:reserve-3d; bewirkt, dass alle Elemente im Würfel als Ganzes einen 3D-Effekt erzeugen. Weitere Informationen finden Sie unter http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/. css:


Code kopieren


Der Code lautet wie folgt:


# Cube {
Position: relativ;
Höhe: 400px; moz-transition: -moz-transform 2s linear;
transition: transform 2s linear; 🎜>- moz-transform-style: Preserve-3d;
transform-style: Preserve-3d; >Weiter Legen Sie die CSS-Eigenschaften einheitlich für die 6 Flächen des Würfels fest.

css
:


Code kopieren Der Code lautet wie folgt:
.face {
height: 360px;
width: 20px;
background-color: rgba(50, 50, 50 , 0,7) ;
}


Legen Sie als Nächstes die 3D-bezogenen Attribute der sechs Flächen fest, verwenden Sie „rotateX“ oder „rotateY“, um die Ausrichtung der Würfeloberfläche umzudrehen, und verwenden Sie „translateZ“, um die Würfeloberfläche im zu verschieben 3D-Raum.

css
:




Code kopieren

Der Code lautet wie folgt:

#cube .one {
-webkit-transform: rotateX(90deg) translatorZ(200px);
-moz-transform: rotateX(90deg) translatorZ(200px);
-o-transform: rotateX(90deg) translatorZ(200px);
transformieren: rotateX(90deg) translatorZ(200px);
}
#cube .two {
-webkit-transform: TranslateZ(200px);
-moz-transform: TranslateZ(200px);
-o-transform: TranslateZ(200px);
transform: TranslateZ(200px);
}
#cube .two {
-webkit-transform: rotateY(90deg) translatorZ(200px);
-moz-transform: rotateY(90deg) translatorZ(200px);
-o-transform: rotateY(90deg) translatorZ(200px);
transformieren: rotationY(90deg) translatorZ(200px);
}
#cube .four {
-webkit-transform: rotateY(180deg) translatorZ(200px);
-moz-transform: rotateY(180deg) translatorZ(200px);
-o-transform: rotateY(180deg) translatorZ(200px);
transformieren: rotationY(180deg) translatorZ(200px);
}
#cube .fünf {
-webkit-transform: rotateY(-90deg) translatorZ(200px);
-moz-transform: rotateY(-90deg) translatorZ(200px);
-o-transform: rotateY(-90deg) translatorZ(200px);
transformieren: rotationY(-90deg) translatorZ(200px);
}
#cube .six {
-webkit-transform: rotateX(-90deg) translatorZ(200px);
-moz-transform: rotateX(-90deg) translatorZ(200px);
-o-transform: rotateX(-90deg) translatorZ(200px);
transformieren: rotateX(-90deg) translatorZ(200px); 🎜体的翻转运动效果.
javascript:




复制代码
代码如下: var xAngle = 0, yAngle = 0;
document.addEventListener('keydown', function(e)
{
switch(e.keyCode)
{
case 37: // left
yAngle -= 90;
break;
case 38: // up
xAngle = 90;
break
case 39: // right
yAngle = 90; 40: // down
xAngle -= 90;
break;
$('cube').style.webkitTransform = "rotateX(" xAngle "deg) rotateY(" yAngle" deg)";
}, false);


课程就讲到这里，接下来大家可以动手尝试一下。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verwenden Sie HTML5 und CSS3, um die Google-Graffiti-Animation fertigzustellenNächster Artikel：So verwenden Sie HTML5 und CSS3, um die Google-Graffiti-Animation fertigzustellen

In Verbindung stehende Artikel

Mehr sehen