Composición con transition, animation y transform.
+
+
=
+
+
=
Hola de nuevo, amigos, para esta página, en la que quiero, explicar en profundidad, la propiedad transform de CSS, he puesto la cabecera, en position: sticky; ya sabreís, que es una posición, que funcioná como un híbrido de las posiciones relative y fixed, y lo he hecho así, para dejar hueco, a la sección de arriba, donde os presento, un ejemplo práctico, de uso, de las propiedades transition, animation y transform, de CSS3.
La propiedad transform, es una nueva carácteristica, incluida en CSS3, muy interesante y potente, con la que podremos conseguir, crear efectos visuales en 2D ó 3D, aplicándo, sobre cualquier elemento, translaciones (translate), rotaciones (rotate) , cambiarlo de tamaño (scale), ó sesgarlo (skew), vamos a ver toda la síntaxis, para declarar, la propiedad transform, con todas sus subpropiedades incluidas.
Podemos aplicar una transformación, a cualquier elemento html, simplemente declarándole en el css, la función de transformación que deseemos, que se le aplicará a su representación visual. Por ejemplo:
Desplazaría al objeto con class="element", 20px en su ejeX (horizontal) y 20px en su ejeY (vertical).
Translate, es una de las funciones, de la propiedad transform, pero hay más, vamos a verlas.
TranslateDesplazamos el objeto, en unidades de medida (px, em, etc) ó porcentaje (%), la cantidad que indiquemos, para su eje horizontal (X) y vertical (Y), si solo se indica, un valor, se aplicára al ejeX.
RotateRotamos el objeto, el numero de grados (deg), que indiquemos, para el objeto entero, ó solo su eje horizontal (X) ó solo su eje vertical (Y), si el objeto, parece deformado, es porque interviene la perspective, que luego veremos.
ScaleIgual que con las funciones anteriores, podemos cambiar el tamaño de un objeto entero, o solamente alguno de sus ejes. El valor admite decimales, Ej: scale(1.5); una curiosidad, una imágen, con scale(-1); estará invertida.
SkewSesgará ó inclinara, el objeto, en su eje X ó Y, el numero de grados (deg), que indiquemos como valor. Interviene la perspective.
Como ya he mencionado, estas serían, transformaciones en 2D, pero también podriamos involucrar el ejeZ (profundidad), consiguiendo transformaciones en 3D.
A un elemento, podemos aplicarle transformaciones multiples, pero, debemos ser conscientes, del efecto cascada de CSS, por lo que no valdría aplicarlas en funciones distintas, pues las posteriores, sobreescribiran a las anteriores y solo tendría efecto, la última, veamoslo en un ejemplo:
Puedes usar las funciones que necesites, para la transformación poniendo un espacio entre función y función. El orden en que las declares, también influye, como veremos después.
Podemos asignarle, a las funciones de transformación, variables ó propiedades personalizadas de CSS, de mucha utilidad, para manejarlas posteriormente, con mayor flexibilidad, por ejemplo podríamos declarar:
Se pueden, definir como variables, las funciones enteras, ó asignarles valores especificos, a los valores de los ejes, y luego incorporarselos a la función, esto nos servirá, para mantener mejor el código, y si empleamos las mismas funciones en diversos sitios en nuestro código, a la hora de cambiarlo, nos resulte mucho más sencillo.
No son la misma transformación, por ejemplo:
.element {transform: translate() rotate();}, que.element {transform: rotate() translate();}
En el primer caso, hará primero la translación y luego la rotación y en el segundo al reves, y se creán distintos efectos de transformación, observalo en el siguiente ejemplo:
También influye, en el efecto de las transformaciones, su origen, se declará como, transform-origin: ;, y por defecto tiene un valor, de 50% 50%. Lo que quiere decir, que por defecto, los elementos se transformán, desde su centro, pero esto también lo podemos variar, veamoslo en la práctica:
Las transformaciones en 3d, básicamente, tienen las mismas funciones, que las de 2d, pero involucrándo al ejeZ (profundidad), de los elementos. Importante saber que al ejeZ, solo podemos asignarle valores, en unidades de medida (px, em, etc.), no admite porcentaje (%).
Lo primero que hay que determinar, para poder transformar, un elemento, con funciones de transformación 3d, es que este incluido en otro contenedor al que tendremos que asignar la propiedad:
transform-style: preserve-3d;
El valor, por defecto de esta propiedad es: transform-style: flat;, y en este caso, no se pueden aplicar las funciones 3d.
Otras propiedades importantes, que podemos determinar para manejar la transformación, son transform-origin:; y perspective:;, vamos a ver todo esto que he explicado con código:
Veamos entonces la sintaxís de las funciones de transformación en 3d.
Como ya he anticipado, son las mismas, con la incorporación del ejeZ (profundidad).
translateZ()Trasladamos el elemento, la distancia que asignemos, en unidades de medidas especificas (px, em, etc), no vale en porcentaje (%), sobre su ejeZ.
translate3d()Ejemplo: transform: translate3d(50%, 50%, 10px);, trasladaría el elemento, la mitad de su ancho (width), en el ejeX, la mitad de su alto (height) en el ejeY, y 10px, en su ejeZ.
rotateZ()Aplicariamos una rotación al elemento, el numero de grados (deg), que indiquemos sobre su ejeZ.
rotate3d()Ejemplo: transform: rotate3d(1, 1, 1, 5deg); aplicará una rotación de cinco grados, sobre los tres ejes del elemento, podriamos quitar la rotación de alguno de los ejes, poniendo el valor a 0.
scaleZ()Redimensionamos el elemento, en su ejeZ, se puede dar valores con decimales.
scale3d()Ejemplo: transform: scale3d(0.5, 2, 3) redimensionará el elemento, dejandolo a la mitad de su ancho (width), el doble de su alto (height), y el triple de su ejeZ.
La función de sesgado ó inclinación skew, no es aplicable sobre el ejeZ.
perspective()La perspectiva, como en dibujo, es la distancia y el punto, desde el que observas algo. Después lo amplio.
matrix()Función de 2d, en la que puedes definir 6 parámetros. Ejemplo: transform: matrix(1, 1, -1, 1, 75, 75);
matrix3d()Función de 3d, en la que se definen 16 parámetros. Ejemplo: transform: matrix3d(1, 0, 1, 0, 0, 1, 0.5, 0, 0, 0, 1, 0, 50, 50, 0, 1);
Esta propiedad, para trabajar con transformaciones 3d, es muy importante, la perspectiva (perspective), como en general, es la distancia desde la que observas algo y desde que punto, y dependiendo, desde que perspectiva, ves algo, te parecera diferente, que desde otra.
Para determinar esta propiedad, hemos de declarar la propiedad perspective, al contenedor padre, de los elementos que transformemos, por ejemplo: perspective: 200px; en medidas especificas, cuanto menos valor le demos, será, como si vieramos el objeto desde más cerca, osea más grande.
Podemos determinar el punto desde el que vemos esa perspectiva, con perspective-origin:;, que admite valores de posición, en porcentajes, por ejemplo: 50% 50%; ó por palabras claves: top, bottom, right, left, ó center.
Otra propiedad, para trabajar con transformaciones 3d, y conseguir darle, el efecto tridimensional, es backface-visibility:;, que por defecto tiene el valor visible, y podemos ponerlo en hidden. Esta propiedad, resulta útil en determinados casos en que tengás, elementos superpuestos, en la misma posición, y mediante una animacíon de giro, te interese que a la vuelta, se vea el objeto que este debajo. Como en el siguiente ejemplo, que puedes activar en el :hover.
Hasta aquí, hemos visto, la propiedad transform, en 2d y 3d, abajo os dejo una aplicación, donde podeis experimentar con ella.
Bueno espero haber explicado con claridad, esta fántastica propiedad de CSS, que como habreís observado en los ejemplos, nos puede dar muchisimo juego en las páginas.
Yo la utilizó bastante, unida a las propiedades transition y animation, junto con la pseudoclase :hover y los pseudoelementos ::before y ::after, permite efectos increibles. Posá el ratón abajo y activa la animación:
Ya me despido, no sin antes, recordar lo que siempre recomiendo, si algo te ha gustado ó interesado, tienes el recurso, de exáminar la página, con la herramienta dev tools del navegador ó click derecho y ver código fuente
