A medida que los navegadores se vuelven más poderosos, están surgiendo nuevas e interesantes posibilidades para la programación HTML5 y CSS3. Uno de los desarrollos más interesantes es la formación de transformaciones 3D. Un transformar 3D es similar a las transformaciones tradicionales, sino que permite a un tercer eje virtual.

Video: Transformaciones en CSS3 - 20 - Como utilizar los Keyframes

Ordinarias, animaciones 2D utilizan el sistema de coordenadas 2D, con un eje X de lado a lado que van y un eje Y que atraviesa de arriba a abajo. Incluso en las transformaciones 2D, hay un reconocimiento tácito de un eje Z. El eje Z pasa por el centro del objeto y apunta directamente a los ojos del espectador y de vuelta hasta el infinito detrás de la pantalla. rotaciones 2D son alrededor de este eje Z imaginario.

Puede determinar qué elementos se superponen otros elementos a través de la propiedad CSS, por lo que aunque todos los elementos de la pantalla son los mismos de la distancia real del usuario, que parecen tener algún tipo de profundidad.

Video: Curso de CSS3 - 09 - Transformaciones en 2D y 3D

transformaciones 3D tienen las mismas operaciones generales como 2D (traducir, girar y escalar), pero se puede aplicar la transformación a lo largo de uno de los tres ejes: X, Y o Z.

Ves cinco cajas con estilos casi idénticos. Cada caja tiene una transformación 3D aplicado diferentes:

• Recuadro 1 tiene un comportamiento por defecto: Recuadro 1 utiliza la disposición ordinaria con ninguna transformación 3D aplicado en absoluto.

• Box 2 se hace girar 45 grados alrededor de x: Box 2 parece estar truncado, pero en realidad hace girar alrededor del eje horizontal (X). Tenga en cuenta que tanto la propia caja y el texto dentro de la caja se acortan.

• Recuadro 3 es casi invisible: Cuadro 3 también se ha girado alrededor del eje X, pero éste se hace girar casi 90 grados, por lo que es casi invisible.

• Recuadro 4 es al revés: Box 4 se gira 180 grados alrededor del eje X, darle la vuelta por completo. Tenga en cuenta que gira alrededor del eje Y también darle la vuelta al cuadro, pero el texto se mantendrá en la parte superior, y sería invertido a lo largo del eje vertical.

• Recuadro 5 está haciendo todo tipo de cosas locas: Recuadro 5 tiene dos transformaciones aplicadas al mismo tiempo. Se hace girar 45 grados alrededor de x y -45 grados a lo largo de y.

Echar un vistazo al código para ver exactamente lo que está pasando aquí.

Transformación 3D Demostración
cuadro 1
Video: CSS3 Flip 3D Animation For Boxes and Cards HTML5 Tutorial
cuadro 2
cuadro 3
Video: Curso HTML5 + CSS3 - 24 Transformaciones
cuadro 4
cuadro 5

La primera regla es nueva perspectiva. Cambiar la perspectiva del elemento padre que contendrá los elementos transformados. Esto le da la capacidad para determinar la forma en que aparecen los elementos que se mostrarán. La perspectiva indica lo cerca que la cámara parece ser la de los elementos.

Cajas de 2 a 4 todos utilizan la misma regla de transformación:. Este mecanismo es muy similar a la 2D girar ()función, pero que gira a lo largo del eje X. También hay rotatey ()y rotatez () funciones, pero rotatez ()se utiliza con poca frecuencia porque es igual que el 2D girar ()técnica.

Si desea aplicar más de una rotación, se puede utilizar el girar 3d ()función. Esta función toma cuatro parámetros. Los tres primeros son modificadores para los tres ejes, y el cuarto es un ángulo.

CSS3 también es compatible con el translatex, translatey (), y translatez () funciones. Estos mecanismos permiten especificar una traslación a lo largo de un eje específico de la translate3d () función le permite trasladarse a lo largo de múltiples ejes al mismo tiempo.

CSS3 incluye scaleX, scaley, y scalez funciones, pero no se utilizan de nuevo estos siempre, ya que actúan similar a la función de escalado 2D. También hay una 3d escala () función para su uso con múltiples escalas.

El apoyo a las transformaciones 3D está creciendo, pero no completa. Por el momento, la -webkit y no-prefijo versiones soportarán la mayoría de los navegadores. La familia de navegadores IE tiene un soporte limitado para las transformaciones 3D.