Mejore el uso de la perspectiva y la transformación: traducez. La pantalla tradicional del producto puede no atraer bien la atención de los usuarios, pero si se agregan elementos 3D apropiados a la pantalla, tal vez el efecto sea bueno ~
Mapa de efecto:
Explique: esta creatividad no es lo que pienso, que imitan a los demás, la creatividad debería estar en W3CPLUS. Por supuesto, el punto es enseñar a todos cómo hacerlo, solo sea una alta imitación ~
En primer lugar, enséñete a usar CSS3 para hacer un cuadrado:
Antes de que haya CSS, tal cubo debería ser difícil de hacer ~ bueno, creo que es difícil ~
HTML:
<body> <div class = wapper> <div class = cube> <div class = firm from> 1 </div> <div class = size back> 6 </div> <div class = firma derecha> 4 </div </div> <div class = size izquierda> 3 </div> <div class = size top> 5 </div> <div class = firm bottom> 2 </div> </div> </body>
La etapa de Wapper para este efecto, es decir, el elemento de la perspectiva. El cubo representa un cubo, y luego 6 div representa cada lado.
Div#Cube Configuración Estilo de transformación: Preserve-3D, y luego establezca Rotar y traducir cada elemento
Ahora todos los fideos están superpuestos en el mismo avión, nos rendimos:
Font se mueve hacia adelante, la distancia del semi -margen (50px) de la dirección del eje z es 50px;
La parte posterior primero gira 180 grados alrededor del eje Y, de modo que la fuente está al exterior, y luego se traduce (50px), porque se ha girado 180 grados en este momento, por lo que Tanslatez está hacia abajo, y está abajo, y está abajo.
De la misma manera, el otro plano gira 90 grados alrededor del eje x o eje y, y luego traduce (50px)
CSS:
. ; Altura: 100px; ;} .top {-webkit -transform: rotatex (90deg) traducez (50px);}. 90deg) traducez (50px);} .bottom {-webkit-transform: rotatex (-90deg) traducez (50px);} .back {-webkit-transform: Rotatey (-180deg) (50px);}Para el efecto de visualización, puede ajustar la distancia de la perspectiva ~
Bueno, se entiende el cubo, por lo que esta pantalla de producto no es difícil;
HTML:
<! > <ul id = Content> <li> <div class = wrapper> <img src = images/a.png> <span class = información> <strong> contrato </strong> la forma fácil de ser de un acto para su tienda. </span> </div> </li> <li> <div class = wrapper> <img src = images/b.jpeg> <span class = información> <strong> formulario de contrato </strong> la forma más fácil de Agregue un formulario de contal a su tienda. </strong> La forma más fácil de agregar un formulario de contacto a su tienda.
CSS:
<Style type = text/css> body {font-familia: tahoma, arial;} #content {margin: 100px auto 0;} #content li, #content .wrapper, #content li img, #contentitit li span {width: 310px; 888888;*/} #content .wrapper {Posity: Related: -WebKit-Transform-Style: Preserve-3D; : 3px; : -WebKit-gradiente (lineal, superior izquierda, fondo izquierdo, color-parada (0%, RGBA (236, 241, 244, 1)), color-parada (100%, RGBA (190, 202, 217, 1 1 , 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 117, 1 1, 117, 1 1, 1 1, 117, 1 1, 1 1, 1 1, 117, 1 1, 1 1 1 , 117, 1 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 1, 1 1, 1 1, 117, 1)); 6s Pantalla: Top; 255, 255, 255, 0.5); transformación: rotatex (95deg);} #content li: hover img {box-shadow: none; , 0.3);Básicamente se ha analizado CSS anteriormente. Permita toda la etapa de intercambio de productos, por lo que agregamos un Div.Wapper para que establezca el estilo transformador: preverse-3D, y luego estableciera la perspectiva del efecto escenario cada li. El efecto de flip final está realmente en Div.Wapper.
Código de origen Haga clic para descargar
Lo anterior es todo el contenido de este artículo.