Transformaciones con CSS3

CSS3 permite transformar los elementos html haciendo cosas como rotarlos, trasladarlos, deformarlos, etc. Veamos algunos ejemplos

Navegadores[editar]

El código CSS3 para aplicar una de estas transformaciones es algo como esto

transform:operacion(parametros)

donde operacion será una de las operaciones disponibles (escalar, trasladar, girar, etc) y los parametros son valores que nos permitirán decidir cuánto queremos escalar, trasladar, girar, ..

transform es la parte fija, pero desgraciadamente los navegadores suelen añadir un prefijo a esta palabra. Nuestro CSS va a tener que repetir el mismo trozo de CSS3 con todos los prefijos de los navegadores que queramos. Es decir, para un giro, por ejemplo, tendremos que poner todo esto

-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);

siendo -webkit- el prefijo para Google Chrome, -moz- para versiones antiguas de firefox, -ms- para internet explorer, -o- para Opera y sin prefijo para versiones modernas de firefox. Por supuesto, cada navegador en una versión lo suficientemente moderna.

Giros[editar]

Para giros tenemos las siguientes posibles transformaciones (prescindimos de los prefijos para no liarlo mucho)

transform:rotate(45deg);
transform:rotate3d(1,1,1,45deg);
transform:rotateX(45deg);
transform:rotateY(45deg);
transform:rotateZ(45deg);

rotate y rotateZ son realmente lo mismos, giran el componente alrededro de un eje Z perpendicular a la pantalla del navegador, es decir, hacen el giro como lo esperamos. El siguiente párrafo está girado 45 grados con estas funciones

transform:rotate(45deg)

rotateX gira alrededor del eje x, que es el eje que va pegado a la pantalla en horizontal. Eso quiere decir que echa la parte superior del elemento hacia atrás de la pantalla y trae la parte inferior hacia delante, el efecto es que veremos el elemento HTML mas estrecho verticalmente de lo normal. El siguiente es un ejemplo de rotateX(45deg)

transform:rotateX(45deg)

rotateY lo hace alrededor del eje Y que es el que va en vertical sobre la pantalla. Un lado del elemento se irá hacia atrás de la pantalla y el otro hacia delante. El efecto es que veremos el elemento más estrecho horizontalmente, como en el siguiente ejemplo de rotateY(45deg)

transform:rotateY(45deg)

Finalmente, rotate3d hace los tres giros (x,y y z) a la vez. La función admite cuatro parámetros, x,y,z y ángulo. Los tres primeros pueden valer -1,0 o 1 según queramos que se haga o no el giro en el eje correspondiente y en qué sentido. Por ejemplo

rotate3d(1,0,0,45deg) es equivalente a rotar solo en el eje x 45 grados.
rotate3d(-1,0,0,45deg) es equivalente a rotar solo en el eje x 45 grados en sentido contrario
rotate3d(1,0,-1,45deg) rota 45 grados en el eje x y 45 grados en sentido contrario en el eje z

y así todas las combinaciones que se nos ocurran. El siguiente ejemplo es de rotate3d(1,1,1,45deg)

transform:rotate3d(1,1,1,45deg)

Traslaciones[editar]

Al igual que los giros con rotate, tenemos traslaciones con translate, en todas sus variantes: x, y, z y 3d. No hay mucho que comentar. Unicamente la traslación en z que por sí sola no tiene mucho sentido. Esta traslación separa de la pantalla el elemento, hacia delante o hacia atras, pero no por estar encima de otros se visualizará sobre estos, sino que aparecerá encima el que vaya detrás dentro del HTML, al igual que cualquier elemento. traslateZ no es un reemplazo de z-index en CSS. Las traslaciones en Z tienen sentido si usan perspectivas en 3d con CSS3.

Veamos algunos ejemplos. El elemento con fondo blanco y línea punteada es el original, el azul el trasladado

translate(20px,20px) daría lugar a una traslación de 20 pixels en el eje x y 20 pixels en el eje y, así

translate

translateX(20px) desplaza 20 pixels en el eje x

translateX

translateY(20px) lo haría en el eje y

translateY

translateZ(20px) lo hace en el eje Z, alejando el elemento de la pantalla, pero como hemos comentado, no veremos nada especial sin el uso de otras transformaciones. El elemento desplazado en Z se superpone al original

translateZ

Finalmente, translate3d(20px,20px,20px) permite hacer trasladar sobre los tres ejes simultaneamente.

translate3d

Escala[editar]

Con scale puede cambiarse el tamaño del componente. Hay, como en los casos anteriores, scale, scaleX, scaleY, scaleZ y scale3d. La parte Z, como en los casos anteriores, no tiene mucho sentido si no se usa una perspectiva 3d. Por lo demás, poco hay que contar, el parámetro que admiten estas transformaciones es un factor de escala, 1 para dejar el tamaño original, mayor que 1 para ampliar y menor que 1 para reducir, por suspuesto, admite decimales.

Simplemente hacer notar que scale(2) a secas modifica la escala en ambos ejes x e y . Veamos un ejemplo de cada uno de ellos

scale(2)

scaleX(2)

scaleY(2)

scaleZ(2)

scale3d(2,2,2)

Inclinación[editar]

Con skew es posible inclinar los componentes, bien en x, bien en y, bien en ambos sentidos a la vez. No existe skewZ ni skew3d. El parámetro que se admite es el ángulo de inclinación deseado. Veamos un ejemplo de cada

skew(10deg,20deg)

skewX(20deg)

skewY(20deg)

Puede verse en skewX(20deg) (el del centro), que los bordes horizontales siguen siendo horizontales, mientras que los verticales se han inclinado 20 grados. En skewY(20deg) (el último), sucede lo contrario, las verticales se mantienen y son las horizontales las que se han inclinado. Finalmente, en skew(10deg,20deg) tanto verticales como horizontales se inclinan.