Entendiendo las propiedades de transformaciones 3D en CSS3

La especificación CSS3 nos dio la posibilidad de hacer transformaciones en los elementos HTML en el plano 2D teniendo la posibilidad de rotarlo, escalarlos, moverlos y sesgarlos. Ahora estas las llamamos las transformaciones planas por que el entorno en que se basan es en el de 2D utilizando solamente los ejes X y Y.

También con CSS3 vamos a poder manipular los elementos en entornos 3D utilizando un nuevo eje, el eje Z, que en adición a los ejes X y Y hacen que el elemento sea tridimensional. Así que en este tutorial vamos a ver los conceptos claves de estas transformaciones 3D que llevan a CSS3 a un plano superior.

¿Qué son lasTransformaciones 3D?

Son funciones que nos van a permitir manipular un elemento en un plano tridimensional permitiéndole crear ilusiones de profundidad y distancia al mismo utilizando los ejes X, Y y Z.

tutorial-transformaciones-CSS3-1

< El cuadrado de la izquierda muestra las x e y ejes en un entorno 2D, y el cubo de la derecha muestra las-y X-ejes y con la incorporación del eje z en un entorno 3D.

Propiedades básicas de Transformaciones 3D en CSS3

CSS3 nos coloca a disposición un grupo de propiedades que vamos a necesitar para trabajar en entornos 3D. Estas son:

  • perspective
  • perspective-origin
  • transform-style
  • backface-visibility
  • transform (Esta propiedad contiene las funciones que nos permitirán rotar, escalar, mover, sesgar, los elementos tanto en entornos 2D como 3D.)

Asi que vamos a ver cada una de ellas.

Perspective.

sintaxis

perspective: length|none;

Para crear el contexto 3D y manipular los elementos HTML en ese plano es necesario especificar una perspectiva de visión y añadir la profundidad necesaria, y esto lo conseguimos con la propiedad perspective, esta propiedad acepta valores de longitud basada en pixeles que especificamos para establecer la distancia a lo largo del eje Z entre el canvas donde se encuentra el elemento hasta a la vista del espectador.

Cuando definimos la propiedad perspective a un elemento solo sus hijos directos recibirán esta vista no el elemento en si.

En el código anterior establecemos el ambiente 3D por medio de una perspectiva de 600px a lo largo del eje Z, desde el canvas donde se basa el elemento hasta el viewer.

propiedad-perspective-tutorial-3d-css3

En el grafico anterior podemos ver varias cosas, primero el papel que juega el eje Z y segundo que entre menor sea el valor que indiquemos en la perspectiva mayor profundidad visual tendremos en los elementos y entre mayor valor menor profundidad y mas llana será las modificaciones tridimensionales.

propiedad-perspective-tutorial-3d-css3-2

perspective-origin.

sintaxis

perspective-origin: x-axis y-axis|initial|inherit;

Con esta propiedad vamos a tener un mayor control de la propiedad anterior, perspective sobre su entorno 3D.

Define el origen base donde un elemento 3D basa sus ejes X y Y y por ende determina la posición del viewer del espectador. Su valor inicial es 50% 50% lo que sitúa el punto origen en el centro del elemento.

Esta propiedad define dos valores, uno para el eje X y el otro para el eje Y, en ellos podemos colocar valores porcentuales que definirán un punto en el elemento o colocar las palabras claves top, right, bottom, left o center para definir los lados o esquinas del elemento.

perspective-origin-css3-3d-transform

Por ejemplo:

perspective-origin-css3-3d-transform-2

Recordemos que en los dos valores que podemos colocar en su argumento vamos a especificar primero el origen X y el segundo valor es para el eje Y.

transform-style

sintaxis

transform-style: flat|preserve-3d;

Como decíamos al comienzo, con la propiedad perspective creamos el entorno 3D y solo los hijos directos del elemento donde aplicamos esta propiedad son afectados y van a poder ser modificados en este plano. Con la propiedad transform-style y su valor preserve-3d vamos a poder especificar que este entorno 3D siga afectando a los hijos de los hijos directos del elemento principal.

Veamos un ejemplo.

tenemos este HTML básico con un div principal y dos divs anidados, podemos decir Padre, hijo y nieto.

Y en el siguiente CSS tenemos lo siguiente.

El elemento con clase .nieto no se verá afectado por que no es hijo directo del elemento que tiene la perspectiva. Pero si aplicamos la propiedad transform-style y como valor preserve-3d En el elemento hijo, este preservara el entorno 3D que le hereda su elemento padre para asi poder afectar el elemento nieto que ahora si va a poder modificarse con las transformaciones 3D de CSS3. De la siguiente forma:

backface-visibility

sintaxis

backface-visibility: visible|hidden;

Cuando un elemento esta en un entorno 3D va a poder ser rotado y la cara posterior va a tener que ser mostrada por ejemplo cuando hace un giro de 180°, la propiedad backface-visibility nos va a permitir especificar si la cara o lado posterior de un elemento va a ser mostrado cuando este sea girado, sus valores son hidden u oculto y visible que es valor por defecto y hace que se muestre la parte posterior del elemento.

backface-visibility-3d-css3

Y ahí es donde aprovechamos para mostrar otro elemento con un lado con una imagen o contenido diferente, lo que conocemos como el efecto “flip”  en CSS3. Como te lo explico en el video de introducción, aquí su resultado.

See the Pen 3D css3 Flip animated by tutosytips (@tutosytips) on CodePen.

y por último

Transform y sus Funciones

Las funciones que aplicamos en la propiedad transform son las que van a ser que manipulemos los elementos en sus diferentes ejes, tanto el X,Y y Z.

Estos son los que nos van a permitir translate=mover, scale=escalar rotate=rotar los elementos en sus diferentes ejes.

Esta vez solo los voy a nombrar y en un siguiente tutorial ampliaremos cada uno.

Función Descripción
translate3d(x,y,z) Define un movimiento Tridimensional
translateX(x) Define un movimiento 3D, basado solo en el eje X
translateY(y) Define un movimiento 3D, basado solo en el eje Y
translateZ(z) Define un movimiento 3D, basado solo en el eje Z
scale3d(x,y,z) Define una escalamiento del elemeto tridimensional
scaleX(x) Define un escalamiento 3D, basado solo en el eje X
scaleY(y) Define un escalamiento 3D, basado solo en el eje Y
scaleZ(z) Define un escalamiento 3D, basado solo en el eje Z
rotate3d(x,y,z,angle) Define un una rotación tridimensional
rotateX(angle) Define una rotación 3D, basado solo en el angulo del eje X
rotateY(angle) Define una rotación 3D, basado solo en el angulo del eje Y
rotateZ(angle) Define una rotación 3D, basado solo en el angulo del eje Z
perspective(n) Define una vista en perspectiva de un elemento transformado 3D

Para entender mejor como funcionan estas funciones en el marco 3D tendremos que comprenderlas en el entorno 2D, así que aquí te dejo el video que hace parte de la serie Aprende CSS3 desde 0, donde las explico. https://www.youtube.com/watch?v=PtsA5-JBsO0

Para mas información aqui tenes la documentación oficial: www.w3.org/TR/css-transforms-1/

Asi, que nos vemos en otro tutorial y espero que este te sea de utilidad.

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

5 Respuestas

  1. lopez dice:

    Buen tuto, johanso, te envío por correo una propuesta respondeme si te interesa. Gracias

  2. Mkrio dice:

    Buena explicación teiniendo en cuenta que esto es solo básico, este tama es muy amplio

  1. julio 23, 2014

    Buena explicación teiniendo en cuenta que esto es solo básico, este tama es muy amplio

  2. julio 23, 2014

    Buena explicación teiniendo en cuenta que esto es solo básico, este tama es muy amplio