OmbuShop Crea Tu Tienda Online

Transformaciones 3D con CSS

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Los tiempos cuando necesitábamos generar imágenes en Photoshop para cada efecto de diseño han quedado atrás. A medida que pasan los años, CSS va sumando posibilidades, quitando responsabilidad a los programas de diseño. A continuación hablaremos de transformaciones 3D con CSS.

Preparando el terreno

Antes de comenzar, prepararemos nuestro espacio de trabajo para poder operar con objetos 3D. Lo primero que haremos es definir la perspectiva del elemento padre (es decir: el que tendrá en su interior a los elementos con efectos 3D). Esto se realiza a través de la propiedad de CSS llamada perspective. Esta propiedad define a cuánta distancia están los elementos 3D de la vista.

A continuación, diremos que queremos preservar las propiedades 3D de los hijos y descendientes de los elementos con transformaciones en 3 dimensiones. Esto lo logramos con transform-style: preserve-3d.

Veremos un ejemplo de perspective y transform-style a continuación:

See the Pen Cenfy by Lucas Mourelle (@lucasmourelle) on CodePen.0

Todavía no hemos aplicado ningún efecto 3D, pero ya está todo listo!
Te invitamos a agregarlo a tus hojas de estilo antes de probar lo que sigue.

Aclaración:

Los ejemplos de este post utilizarán SASS (con sintaxis SCSS), y un poco de ayuda de Compass, para el código de presentación. Si deseas ver el código CSS convencional, puedes hacer click donde dice “view compiled”. Allí verás que en muchos casos algunas propiedades se repiten, con los prefijos de cada navegador, hablaremos de eso al final.

(Si todavía no has probado SASS, te recomendamos que leas este post.)

Translate (traslación)

Una posibilidad es modificar la posición de un elemento en el espacio (es decir, en las 3 dimensiones). Esto se puede hacer con la propiedad translate, a continuación mostramos ejemplos de traslación horizontal, vertical y en profundidad.

See the Pen luBed by Lucas Mourelle (@lucasmourelle) on CodePen.0

Siempre que se esté trabajando en el eje X, los números negativos mueven al elemento hacia la izquierda y los positivos hacia la derecha. Cuando se trabaja en el eje Y, los valores negativos mueven al elemento hacia arriba y los positivos hacia abajo. Por último, cuando de profundidad se trata, los números negativos alejan al elemento de la vista, mientras que los positivos lo acercan (haciéndolo ver más grande).

Te invitamos a probarlo y a modificar el código y ver su resultado en tiempo real en cada uno de los ejemplos!

Rotate (rotación)

También podemos rotar objetos, en cada uno de los 3 ejes 3D. Veamos un ejemplo:

See the Pen HueoG by Lucas Mourelle (@lucasmourelle) on CodePen.0

 

Backface

Como habrás visto en el código, estamos utilizando una propiedad llamada backface. No, no se trata de un insulto en inglés, sino de una propiedad booleana (es decir que acepta únicamente los valores: true o false) que permite definir si queremos que se vea el dorso del elemento, en caso de estar rotado por completo utilizando la rotación 3D.

Por lo general, el dorso de un elemento muestra su contenido en espejo, como puedes ver en el siguiente ejemplo:

See the Pen ehGKz by Lucas Mourelle (@lucasmourelle) on CodePen.0

 

Scale (escalado)

También podemos aprovechar las propiedades de escalado en su versión 3 dimensiones.

See the Pen loJIq by Lucas Mourelle (@lucasmourelle) on CodePen.0

En el primer ejemplo modificamos el escalado horizontal (scaleX), en el segundo el escalado vertical (scaleY), y en el tercero el escalado en profundidad (scaleZ), para el cual además hemos agregado una rotación de forma que se visualice el efecto de estiramiento en el eje Z.

Transform origin (eje de transformación)

Habiendo utilizado transformaciones en 2 y 3 dimensiones, también podemos decidir cuál es el eje de coordenadas de estas transformaciones (por ejemplo, desde que punto pivotea una rotación). Esto se hace a partir de la propiedad de CSS transform-origin.

Al no haber aclarado el transform-origin en los ejemplos anteriores, los navegadores utilizarán el default (que suele ser 50% 50%, es decir en el centro del objeto).

En el ejemplo que sigue pondremos el eje en el límite izquierdo del objeto (con las coordenadas 0% 0%):

See the Pen ruHEl by Lucas Mourelle (@lucasmourelle) on CodePen.0

Las medidas pueden ser absolutas (por ejemplo en px) o relativas (utilizando %, em, etc.). Te invitamos, nuevamente, a probar modificando el código.

Prefijos y compatibilidad

Desde ya, muchas de estas propiedades son relativamente nuevas, por lo que al utilizarlas debemos asegurarnos que su utilización signifique mejoras progresivas al diseño de nuestras páginas (progressive enhancements), antes que un feature necesario para el uso del sitio o la webapp.

En muchos casos, habrá que agregar los prefijos de los navegadores (-webkit- , -moz-, -ms- , -o-). Puedes chequear en el sitio Can I Use, siempre que vayas a utilizar una propiedad de CSS cuya compatibilidad en navegadores está en duda.

¡Esperamos que utilices estas propiedades de CSS para lograr efectos 3D en tus tiendas online!