HTML5+CSS3: 3D Rotierende Trojaner -Effekt -Album

Der Zweck dieses Blogs ist, dass die verführerische Instanz des HTML5 CSS3 Special Instance CSS3 den 3D -Flop -Effekt von Baidu Tieba erstellt hat.

Effektdiagramm: Hey, ich habe einige Fotos des College -Abschlusses in einen Rotary Trojaner gemacht, der sich um meinen großen Text und die Gnade des Anbaues meiner Alma Mater ~ drehte

Perspektive Attribute umfassen zwei Attribute: keine und die Länge der Einheit.

Unter ihnen ist der Standardwert des Perspektivattributs keine, was bedeutet, dass das 3D -Objekt in einem unbegrenzten Winkel betrachtet wird, aber flach aussieht. Ein anderer Wert <langth> akzeptiert einen Wert einer Einheit über 0. Und seine Einheit kann nicht prozentual sein. Je größer der Wert von <Langth>, desto weiter erscheint der Winkel, um eine recht niedrige Festigkeit und eine sehr kleine 3D -Raumänderung zu erzeugen. Umgekehrt, je kleiner dieser Wert, desto näher der Winkel, je näher es näher ist, um einen hohen Winkel mit hoher Intensität und eine große 3D -Änderung zu erzeugen. Einfach ausgedrückt: Wenn die Perspektiveinstellungen festgelegt sind, desto kleiner bedeutet dies, dass die 3D -Effekt umso näher am 3D -Objekt liegt und umgekehrt.

Unter der Annahme, dass der Wert des TranslateZ -Werts, je kleiner der Wert der Übersetzung ist, ist die Größe des untergeordneten Elements, wenn der Wert der Einstellungen nahe 300px ist, desto kleiner ist.

1. Zunächst ist der Behälter aller Bilder Position: absolut, zusammenlagert und dann die Rotatey auf 40*i, i = 0, 1, 2 ... 9 einstellen;

2. Stellen Sie dann die Übersetzung für jedes Bild des Behälters ein.

HTML:

 <! Text/javascript src = ../../ jquery-1.8.3.js> </script> <script type = text/javascript> // alert (64/math.tan (20/180 * math.pi)) ); ; Deg *] i ++)+Deg))})});}); /1.jpg/> <span> Machen Sie jeweils eine Sache und tun Sie es gut. eine Zeit und gut > <Img src = img // 4.jpg/> <span> Whatver macht das Wort gut. Ihre Sicherheit. li> <li> <img src = img/7.jpg/> <span> Nie ein Büro, das Sie heute tun können, bis morgen. > <Pan> Jack aller Trands und Meister von None > </div> </body> </html "

CSS:

 li {width: 128px; 0, 0, .5); {Wid: 900px; JPG) No-Repeat 0 0; -Übergang: -Webkit-Transformation 1S; (0deg) translatez (300px);} li: nth-child (1) {-webkit-transform: rotatey (40deg) translatez (300px);} li: n-Child (2) {-webkit-transform: rotat ey (rotat ey (rotat ey ( 80deg) translatez (300px);} li: nth-child (3) {-webkit-transform: rotatey (120deg) translatez (300px);} li: nth-child (4) {-webkit-transform: 16 0deg) translatezilez (4) {-webkit-transform: 16 0deg) translatezilez (4) {-webkit-transform: 16 0deg) translatezilez (4) {-webkit: 16 0deg) translatezildratez (4) {-webkit: 16 0deg) translatez- (300px);} li: nth-child (5) {-webkit-traansform: rotatey (200-ass) translatez (300px);} li: n-Child (6) {-webkit-transform: rotatey (240deg) übersetzt (transformiert) {-webkit: rotatey (240deg) übersetzt (transformiert) tez (-Webkit-transform 300px);} li: nth-child (7) {-webkit-transform: rotatey (280deg) translatez (300px);} li: n-Child (8) {-webkit-transform: rotatey (300px);} li: N-te-child (9) {-webkit-transform: rotatey (360di) translatez (300px);}

DIV#ist die Bühne, die Perspektive, jedes LI setzt Drehung und transformiert#Container auf die Webkit-Transformation: Preserve-3D; Der Standardwert bedeutet, dass alle Sub -Elemente in 2D -Flugzeugen dargestellt werden. Preserve-3D zeigt an, dass alle Unterelemente im 3D-Raum dargestellt werden. Wenn der Wert des Transformationsstils auf einem Element auf ein Preserve-3D eingestellt ist, zeigt er an, dass es keine flache Ausstellungsoperation durchführt und sein gesamter Unterelement im 3D-Raum liegt. Unter normalen Umständen wird dieses Attribut für das Ausführungselement von 3D -Animationseffekten verwendet, dh 3D -Animationseffekte, sodass seine Sub -Elemente im 3D -Raum sein sollten.

Eine Sache, auf die Sie achten sollten: In diesem Beispiel ist der Animationseffekt tatsächlich der Mausklick. Es ist, diesen Trojaner zu drehen, sodass Sie jedes Mal den Drehrwinkel des Div -# -Behälters rotatey 40 ändern müssen.

Das oben genannte ist der Inhalt dieses Artikels.