Transformaciones CSS en 3D
El estilo CSS3 nos permite también modificar elmentos de una página web en 3D, algo que, como ocurría en las transformaciones 2D, realmente solo tienen utilidad en animaciones y en páginas muy dinámicas o interactivas. Los métodos o acciones que podemos ejecutar en 3D son los mismos que con 2D pero con un tercer eje para giros y transformaciones: Y eje vertical, X eje horizontal y Z hacia adentro de la pantalla. Para ver el efecto 3D necesitamos añadir la propiedad perspective.
rotate3d()
La propiedad rotate permite girar en los tres ejes, ahora acepta tres argumentos: giro en el eje X, giro en el eje Y y giro en el eje Z Ahora pdemos mover los elementos en tres dimensiones X, Y, Z, la tercera es en profundidad. Pulsa sobre el recuadro para ver el giro
No está nada mal. Para lograr el efecto giro es necesaria la propiedad perspective
.caja{
perspective: 800px;
transform: rotateY(45deg);
}
Esta propiedad puede usarse con cada eje independiente o con los tres ejes si usamos un valor para cada eje rotate3d(ang, angY,angZ)
Translate3d()
También es posible mover el bloque en el eje Z: hacia afuera de la página, translateZ(positivo) o hacia adentro de la página translateZ(negativo). Míralo en este bloque
Como ves es similar a un escalado: si lo mueves hacia dentro de la página se ve más lejos, y si lo mueves hacia afuera se ve más grande. En este caso
.caja{
perspective: 500px;
transform: trnaslateZ(-450);
}
Ambos ejemplos, como los de las transformaciones 2D, se han hecho asignando estos valores al estilo del bloque mediante Javascript: caja.style.transform = "perspective(800px ) rotateX(45deg )"
perspective()
Hemos usado esta propiedad para poder ver los efectos 3D, es imprescindible. Nos define el espacio en que se desarrolla la transformación 3D. El argumento es un valor numérico que define el número de pixels en el que se produce la trnasformación, un número bajo corresponde a una vista muy en profundidad, un valor alto implica una visión muy plana.
Como ves con un poquito de Javascript y estas transformaciones se pueden conseguir efectos interesantes, pulsa sobre el cuadro y lo verás....