Verbessern Sie die Verwendung von Perspektive und Transformation: TranslateZ. Das herkömmliche Produktdisplay erregt möglicherweise nicht die Aufmerksamkeit der Benutzer gut, aber wenn geeignete 3D -Elemente zum Display hinzugefügt werden, ist der Effekt möglicherweise gut ~
Effektkarte:
Erklären Sie: Diese Kreativität ist nicht das, was ich denke, wenn Sie andere imitieren, die Kreativität sollte auf W3Cplus sein. Natürlich geht es darum, allen zu beibringen, wie es geht, nur eine hohe Nachahmung ~
Lehren Sie zunächst, dass Sie CSS3 verwenden, um einen Platz zu machen:
Bevor es CSS gibt, sollte ein solcher Würfel schwer zu machen sein ~ Nun, ich denke, es ist schwierig ~ ~
HTML:
<body> <div class = wapper> <div class = cube> <div class = sign von> 1 </div> <div class = Größe zurück </div> <div class = Größe links> 3 </div> <div class = size top> 5 </div> <div class = signing boden> 2 </div> </div> </body>
Die Stufe von Wapper für diesen Effekt, das heißt, das Element der Perspektive. Würfel repräsentiert einen Würfel, und dann 6 Div repräsentiert jede Seite.
Div#Cube-Einstellungen Transformation-Stil: Preserve-3D und dann stellen Sie jedes Element ein und transferieren
Jetzt sind alle Nudeln auf demselben Flugzeug überlappt, wir geben auf:
Schriftart bewegt sich vorwärts, der Abstand des Semi -Margin (50px) der z -Achsenrichtung beträgt 50px;
Zurück dreht sich zuerst um 180 Grad um die Y -Achse, so dass sich die Schriftart nach außen befindet und dann Translatez (50px), da sie zu diesem Zeitpunkt 180 Grad gedreht wurde runter.
Auf die gleiche Weise dreht sich die andere Ebene um die x -Achse oder die Y -Achse um 90 Grad und dann übersetzt (50px)
CSS:
.wapper {Margin: 100px Auto 0; Width: 100px; Height: 100px; -webkit-Perspective: 1200px; FONT-SIZE: 50px; FONT-Weight: Bold; COLOR: #fff;} .Cub. e {positive: related ; Höhe: 100px; ;} .top {-webkit -transform: rotatex (90de) translatez (50px);}. 90deg) translatez (50px);} .bottom {-webkit-transform: rotatex (-90deg) translatez (50px);} .back {-webkit-transform: rotatey (-180Deg) (50px);};};};Für den Anzeigeeffekt können Sie den Abstand der Perspektive anpassen ~
Der Würfel wird verstanden, daher ist diese Produktanzeige nicht schwierig.
HTML:
<! > <ul id = content> <li> <div class = Wrapper> <img src = bilder/a.png> <span class = Information> <strong> Vertrag </strong> Die ESIET -Art und Weise, wie ein Handlungsformular für Ihren Laden ist. </Span> </div> </li> <li> <div class = Wrapper> <img Src = Bilder/B.jpeg> <span class = Information> <strong> Vertragsform </strong> Der einfachste Weg zu Fügen Sie Ihrem Shop eine kontaktive Form hinzu. </strong> Der einfachste Weg, um Ihrem Shop ein Kontaktformular hinzuzufügen.
CSS:
<Style type = text/css> body {font-family: tahoma, arial;} #content {margin: 100px auto 0;} #content li, #Content .wrapper, #Content li img, #Contentit li span {width: 310px; 888888 : 3px; : -webkit-Gradient (linear, links oben, links unten, Farbstopp (0%, RGBA (236, 241, 244, 1)), Farbstopp (100%, RGBA (190, 202, 217, 1 1) , 1 1, 1 1, 1 1, 1 1, 1 1, 1, 117, 1 1, 117, 1 1, 1, 117, 1 1, 1, 1, 117, 1 1, 1 1 1 1, 1, 1, 1, 1, 1, 117, 1, 1 1 1 1 , 117, 1 1, 1 1, 1, 1 1, 1 1, 117, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 1,. 1 1, 117, 1)); 6s; 255, 255, 255, 0,5); Transformation: rotatex (95DEG);} #Content Li: Hover IMG {Box-Shadow: None; , 0,3);CSS wurde im Grunde genommen oben analysiert. Erlauben Sie der gesamten Produktfreigabestufe, also haben wir einen Div.-Wapper hinzugefügt, damit er die Transform-Syle: PREEverse-3D festlegen, und dann die Perspektive der Bühneneffekt-Perspektive jedes Li einstellen. Der letzte Flip -Effekt liegt wirklich auf Div.wapper.
Quellcode Klicken Sie hier, um herunterzuladen
Das oben genannte ist der Inhalt dieses Artikels.