CSS3: Transform 3D. Guia de inicio y uso.

CSS3: Transform 3D. Guia de inicio y uso.

Por Kseso ✎ 1
Origen img: Rafael Castillejo

CSS utiliza un modelo de coordenadas para logra el formato visual. Esto es, cómo y donde aparece cada elemento en los medios visuales. Así, por los valores (de posición y tamaño) declarados explícita o implícitamente a un determinado elemento lo coloca en un punto exacto del medio y a partir de él lo sitúa hacia la derecha y abajo si son valores positivos (ejes X e Y).

Lo que hace la propiedad "transform" y sus asociadas es modificar dichas coordenadas.
Así mismo, Css3 introduce la 3ª dimensión o profundidad (eje Z). Así, los elementos de la página se pueden trasladar, rotar y escalar en dos o tres dimensiones espaciales (Ejes X-Y-Z).
Y con las propiedades adicionales se pueden anidar varias transformaciones más fácilmente y con mayor control de la forma en cómo interactúan en los tres ejes.

Nota:
Z-index no se puede considerar que introdujese la 3ª dimensión. Sólo afecta al orden del apilado. Qué elemento se situa "por encima o por debajo" de cuál.

Este artículo se basa en dos documentos del consorcio: CSS 2D Transforms: W3C Working Draft 15 December 2011 y CSS Transforms W3C Working Draft 28 February 2012 3 Abril 2012 actualizados.

La propiedad "Transform"

Declara las distintas funciones que se aplican para lograr las transformaciones. Por defecto no aplica (hay que declararla expresamente), no se heredan y sólo afecta al elemento hasta el borde: los márgenes se excluyen al aplicar las transformaciones Css. Las aceptan tanto los elementos de bloque como los de línea.
Las transformaciones no afectan al flujo del documento. Esto es, si un elemento se escala para el resto no existe tal transformación. Se comportan como si no hubiese cambiado su tamaño.
Se pueden aplicar varias funciones simultáneamente. Su sintaxis es:

elemento {transform: función(valor) función(valor);}
Las Funciones de Transform

Con las transformaciones Css a los elementos se les puede aplicar las funciones translate, rotate, scale, skew (trasladar, girar, escalar y sesgar).

translate:
translate(valor). Traslación o desplazamiento.
El "valor" puede se una o dos cantidades, correspondientes al eje X y al Y. Las unidades cualquiera de las válidas en tamaños: px | em | % | ...
rotate
rotate(ángulo). El giro en el plano X-Y
El "ángulo" un número cualquiera (positivo o negativo) y la unidad cualquiera de las empleadas en ángulos. La más usual "deg" (grados)
scale
scale(valor, valor). El escalado o variación de tamaño.
Tiene dos declaraciones separadas o conjuntas: scaleX(valor) y scaleY(valor).
No tiene unidad. Valores entre cero e infinito.
skew
skew(valor, valor). El sesgo. Añade una apariencia oblicua. Al igual que el anterior, admite los dos inclinaciones, en X e Y.
skewX(30deg) - skewY(10deg) - skew(30deg,10deg)

Transform Css3 3D: Propiedades específicas 3D

En todo lo anterior sólo nos manejamos en el plano de la pantalla. Para dar el salto a la 3ª dimensión Css nos provee de las siguientes propiedades: transform-origin, transform-style, perspective, perspective-origin, backface-visibility.
Con ellas es posible lograr y controlar fácilmente el aspecto 3D no sólo de un elemento sino de varios y el comportamiento conjunto de ellos.

Los ejemplos ilustrativos comparten el siguiente código (html+css) base. Sin las propiedades 3D transform se vería como lo hacen los divs de la derecha: Un bonito apilamiento de cajas, como el color está en rgba se adivina algo de lo que se encuentra bajo la última que aparece en el html:

   
1
6
2
5
3
4
<div style="width:150px;height:150px;margin:25px 0 0 25px;" class="container-0D"> <div style="width:100%;height:100%;"> <div style="display: block;position: absolute;width: 100px;height: 100px;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: transparent;">   </div> <div style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(0,0,0,0.3);">1</div> <div style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(0,255,0,1); color: black;">6</div> <div style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(196,0,0,0.7);">2</div> <div style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(0,0,196,0.7 );">5</div> <div style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(196,196,0,0.7 );">3</div> <div style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(196,0,196,0.7);">4</div> </div> </div>
transform-style:
Esta propiedad especifica cómo se representan los elementos anidados en el espacio 3D. Admite dos valores: flat y preserve-3D
flat: Los hijos del elemento al que se le declara no conservan su posición en la 3D. Desaparecen de la vista.
preserve-3D: Lo contrario de la anterior. Se mantienen visibles y conservan las propiedades.
perspective:
Esta es la propiedad que logra la apariencia de la 3ª dimensión o profundidad. Ajusta el punto de vista con el que se muestra el elemento. Cuanto más bajo es el valor más profundidad otorga. Con un valor de 0 (cero) el resultado es que no hay efecto 3D.
perspective-origin:
establece la posición X e Y desde la cual el espectador parece estar mirando a los hijos del elemento.
transform-origin:
El punto referente para realizar la transformación. Si escalas un elemento con esta propiedad indicas las coordenadas desde la que se realiza. Así, si es el (0,0) aumenta su tamaño hacia la izquierda y abajo. Si es (bottom, right) hacia arriba y a la izquierda y si fuese (center, center) hacia todos los lados por igual.
backface-visibility
Controla qué se hace con el envés o cara posterior del elemento al transformarlo. Que se muestre o no. Esto es, si giramos una moneda 180ª en el eje Z, qué debemos ver, si la cara invertida o la cruz. Dos valores: visible y hidden.
Ejemplos de transform 3D

Unos ejemplos de lo anterior. Debido al Bug de Chrome con "transform-style: preserve-3d" sólo incluyo el prefijo -moz- en las propiedades. Mira el código fuente del html para ver las distintas propiedades:

perspective:0; perspective:150px; perspective:300px; perspective:600px;
   
1
6
2
5
3
4
   
1
6
2
5
3
4
   
1
6
2
5
3
4
   
1
6
2
5
3
4

En los cuatro anteriores son comunes perspective-origin: 150% 150%; transform-style: preserve-3d;.
En los siguientes se cambia el origen de la perspectiva y mantienen en común perspective: 300px;transform-style: preserve-3d;

perspective-origin:150px 150px; perspective-origin:50% 50%; perspective-origin:-50px -50px;
1
6
2
5
3
4
1
6
2
5
3
4
1
6
2
5
3
4

Créditos:
Estos dos grupos de ejemplos los he tomado de la pagina de developer.mozilla.org

Habrás observado que hay propiedades que se aplican al contenedor padre y afectan a sus hijos y otras que diréctamente las soportan los hijos para conformar la apariencia 3D.

Transform, transition y keyframes trabajando de la mano:

De artículos anteriores ya conocemos los ingredientes secretos de la magia de css3: transition, @keyframes y sus animation y con éste las transform 2D y 3D.
Así que vamos a preparar nuestra marmita de poción mágica Css3. Al estilo del gran Panorámix y con la ayuda de otros druidas*, elegimos sábiamente los ingredientes y proporciones. Pero si eres Obelix, recuerda, tú no, porque de pequeñito te caíste dentro de la olla.

Un cubo de imágenes girando

Debido al bug de Chrome con transform-style y como sólo he incluido los prefijos -moz- y -webkit- (perdón por la omisión del resto) en unos instantes podrás ver aquí un vídeo de cómo se debería ver el cubo.

Todo lo anterior se logra con un html tan simple como el siguiente:

<div id="cont-cubo"> <div class="cubo"> <div class="cara1"><img src="pao-1.JPG" alt="" /></div> <div class="cara2"><<img src="pao-2.JPG" alt="" /></div> <div class="cara3"><img src="pao-3.JPG" alt="" /></div> <div class="cara4"><img src="pao-4.JPG" alt="" /></div> <div class="cara5"><img src="pao-5.JPG" alt="" /></div> <div class="cara6"><img src="pao-6.JPG" alt="" /></div> </div> </div>

Y el Css correspondiente:

#cont-cubo { margin:100px auto; -webkit-perspective:600px; -moz-perspective:600px; -webkit-animation:cont-cubo 10s infinite linear; -moz-animation:cont-cubo 10s infinite linear; } .cubo { position: relative; margin: 0 auto; height: 200px; width: 200px; -webkit-animation:giro 25s infinite linear; -moz-animation:giro 25s infinite linear; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; } .cubo div { position: absolute; height: 200px; width: 200px; -moz-cubo-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5); /* Firefox anti aliasing */ -webkit-animation:rotate 15s infinite linear; -moz-animation:rotate 15s infinite linear; } .cubo div img {width:200px; height:200px; border-radius:200px; -webkit-animation:rot 5s infinite linear; -moz-animation:rot 5s infinite linear; } .cubo div.cara1 { background:rgba(0,102,153,.5); -webkit-transform:translateZ(100px); -moz-transform:translateZ(100px); } .cubo div.cara2 { background:rgba(150,153,0,.5); -webkit-transform:rotateY(90deg) translateZ(100px); -moz-transform:rotateY(90deg) translateZ(100px); } .cubo div.cara3 { background:rgba(39,116,61,.5); -webkit-transform:rotateY(180deg) translateZ(100px); -moz-transform:rotateY(180deg) translateZ(100px); } .cubo div.cara4 { background:rgba(105,136,165,.5); -webkit-transform:rotateY(-90deg) translateZ(100px); -moz-transform:rotateY(-90deg) translateZ(100px); } .cubo div.cara5 { background:rgba(223,48,48,.5); -webkit-transform:rotateX(-90deg) translateZ(100px) rotate(180deg); -moz-transform:rotateX(-90deg) translateZ(100px) rotate(180deg); } .cubo div.cara6 { background:rgba(144,153,102,.5); -webkit-transform:rotateX(90deg) translateZ(100px); -moz-transform:rotateX(90deg) translateZ(100px); } @-moz-keyframes giro { 0% {-moz-transform: rotateX(0deg) rotateY(0deg);} 100% {-moz-transform: rotateX(1080deg) rotateY(360deg);} } @-webkit-keyframes giro { 0% {-webkit-transform: rotateX(0deg) rotateY(0deg);} 100% {-webkit-transform: rotateX(1080deg) rotateY(360deg);} } @-moz-keyframes rot { 0% {-moz-transform: rotate(0deg);} 100% {-moz-transform: rotate(360deg);} } @-webkit-keyframes rot { 0% {-webkit-transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);} }

Los druidas colaboradores del cubo:
Las imágenes obra de la artista bonaerense Paola Magariños. Puedes verlas en su página Autos con Arte o seguir en twiter su cuenta @autosconarte
Para el cubo y su rotación en trabajos varios: varios autores, varias páginas. Por ejemplo:
Paul Hayes.
David DeSandro.
Stu Nicholls

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 1

  1. Se ve muy bueno esto, muy bueno para animaciones avanzadas.

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap