CSS3 Transforma 3D usando CSS3 para crear cubos 3D dinámicos (práctica HTML5)

En el curso de hoy, te presentaré cómo crear cubos 3D usando CSS3. Puede navegar por los efectos reales a través del siguiente enlace, operar las teclas hacia arriba y hacia abajo para lograr el efecto flip del cubo.

Comencemos con cómo hacerlo.

<div id = "experimento">

<div id = "cubo">

<div>

Una cara

</div>

<div>

Arriba, abajo, izquierda, derecha

</div>

<div>

Lorem ipsum.

</div>

<div>

Las nuevas formas de navegación son divertidas.

</div>

<div>

Cubo 3D giratorio

</div>

<div>

Más contenido

</div>

</div>

</div>

En el HTML anterior, los 6 divs con clase como cara representan las 6 caras del cubo, y se distinguen usando los nombres de clase de uno a seis. El contenedor externo contiene dos capas de contenedores con cubo de identificación y experimento. Ambas capas son necesarias. Sin nadie, el efecto 3D no se puede producir.

Entre ellos, el experimento juega el papel de la lente. Establezca la distancia focal para que el efecto 3D se pueda mostrar en los elementos internos.

El atributo de perspectiva define la profundidad del plano del eje Z, y también define las dimensiones relativas de los elementos por encima y por debajo del plano. En general, cuanto menor sea el valor de la perspectiva, mayor es el objeto, más cerca estará para usted; Cuanto mayor sea el valor de la perspectiva, menor es el objeto, más lejos de usted. Puede ver el efecto a través de http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html.

La propiedad de origen de la perspectiva define el origen de la perspectiva.

#experimento {

-WebKit-Perspectiva: 800;

-Moz-Perspectiva: 800;

-O-PERSPECTIVE: 800;

Perspectiva: 800;

-WebKit-Perspective-Origin: 50% 200px;

-Moz-Perspective-Origin: 50% 200px;

-O-PERSPECTIVE-ORIGIN: 50% 200px;

Perspective-Origin: 50% 200px;

}

Las propiedades establecidas por el cubo contienen un ancho y altura fijos, y establecen la posición al relativo. La altura y el ancho fijos son necesarios para que los elementos en el cubo puedan realizar animaciones 3D dentro de un área definida. Si establece la altura y el ancho al 100%, los elementos en el cubo se moverán a través de todo el rango de página.

La transición se usa para establecer propiedades relacionadas con la animación. Estilo de transformación: Preserve-3D; Hace que todos los elementos en el cubo produzcan efectos 3D en su conjunto.

Puede navegar http://www.zhangxinxu.com/wordpress/2012/09/css3/">css3-3d-transformeppective-animate-transition/ para obtener más información.

CSS:

#cube {

Posición: relativo;

Margen: 100px Auto;

Altura: 400px;

Ancho: 400px;

-WebKit-Transition: -webkit-transform 2s lineal;

-Moz-Transition: -Moz-Transform 2s Lineal;

-O-transición: -o-transform 2s lineal;

Transición: transformar 2s lineal;

-WebKit-Transform-Style: Preserve-3D;

-S-MOZ-Transform-Style: Preserve-3D;

-O-Transform-Style: Preserve-3D;

Estilo de transformación: Preserve-3D;

}

A continuación, configure el atributo CSS para las 6 caras del cubo.

.rostro {

Posición: Absoluto;

Altura: 360px;

Ancho: 360px;

relleno: 20px;

color de fondo: RGBA (50, 50, 50, 0.7);

}

A continuación, establezca las propiedades relacionadas con 3D de las 6 caras, use Rotatex o Rotatey para lograr el cambio de la superficie del cubo, y use TraduceZ para lograr el movimiento de la superficie del cubo en el espacio tridimensional.

#cube .One {

-WebKit-Transform: RotateX (90deg) Traducez (200px);

-Moz-Transform: Rotatex (90deg) Traducez (200px);

-O-transform: Rotatex (90deg) Traducez (200px);

transformación: Rotatex (90deg) Traducez (200px);

}

#cube .Two {

-WebKit-Transform: traducez (200px);

-Moz-Transform: traducez (200px);

-O-transform: traducez (200px);

Transform: traducez (200px);

}

#cube .three {

-WebKit-Transform: Rotatey (90deg) Traducez (200px);

-Moz-Transform: Rotatey (90deg) traducez (200px);

-O-transform: Rotatey (90deg) Traducez (200px);

Transformación: Rotatey (90deg) Traducez (200px);

}

#cube. cuatro {

-WebKit-Transform: Rotatey (180deg) traducez (200px);

-Moz-Transform: Rotatey (180deg) Traducez (200px);

-O-transform: Rotatey (180deg) Traducez (200px);

Transform: Rotatey (180deg) Traducez (200px);

}

#cube .cute {

-WebKit-Transform: Rotatey (-90deg) Traducez (200px);

-Moz-Transform: Rotatey (-90deg) traducez (200px);

-O-transform: Rotatey (-90deg) traducez (200px);

transformación: rotatey (-90deg) traducez (200px);

}

#cube .six {

-WebKit-Transform: RotateX (-90deg) Traducez (200px);

-Moz-Transform: Rotatex (-90deg) traducez (200px);

-O-transform: Rotatex (-90deg) traducez (200px);

transformación: rotatex (-90deg) traducez (200px);

}

Lo último que debe hacer es unir el evento de llave a la página, de modo que cuando presione las teclas Up, abajo, izquierda y derecha, se logra el efecto de movimiento del cubo.

JavaScript:

var xangle = 0, yangle = 0;

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

{

Switch (E.KeyCode)

{

Caso 37: // izquierda

Yangle -= 90;

romper;

Caso 38: // arriba

xangle += 90;

romper;

Caso 39: // Derecho

yangle += 90;

romper;

Caso 40: // abajo

Xangle -= 90;

romper;

};

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

}, FALSO);

Eso es todo para el curso, puedes probarlo a continuación.