Hola y bienvenidos de nuevo a un nuevo curso, en este caso, Curso CSS Transformaciones Paso a Paso en su versión 2020, ya que este y todos los cursos que se imparten estarán en constante actualización, y pidiendo las debidas disculpas del caso por no subir más cursos a menudo, ya que existen otros compromisos que no me permiten hacerlo, pero siempre trataremos de hacer lo mejor, cada vez que podamos, pero bueno a lo que venimos.
En esta ocasión, nos corresponde hablar sobre las transformaciones en CSS, en posts anteriores ya hablamos sobre animaciones y transiciones que son un tipo más de animaciones y no podíamos dejar de lado las transformaciones, ya que también estas, nos permiten generar elementos más atractivos visualmente al usuario que visita nuestra web.
Empezaremos diciendo que las transformaciones nos permiten rotar y mover un elemento y estas se rigen por la propiedad transform a la cual le podemos aplicar los siguientes valores o métodos que nos permitirán crear transformaciones increíbles:
- translate()
- rotate()
- scale()
- scaleX()
- scaleY()
- skew()
- skewX()
- skewY()
- matrix()
Todas estos métodos los manipularemos como dijimos anteriormente, con la propiedad transform
translate()
Con el método translate() podemos mover un elemento situado en determinada posición, de acuerdo a los parámetros que le pasemos, en el eje X y en el eje Y. Veamos un pequeño ejemplo:
Ejemplo
Un primer ejemplo muy típico es mover un elemento de una posición a otra, en este caso veremos nuestro elemento 250px a la derecha y 100px hacia abajo, tomando en cuenta que su posición inicial era de 0 px a ambos lados. Te sugerimos que lo intentes por ti mismo, modificando la posición, ve al editor de Codepen e intentadlo, así, todo te quedará más claro.
See the Pen
translate() by FranDev (@FranDevhn)
on CodePen.
rotate()
El método rotate() nos permite girar o rotar nuestro elemento en sentido de las agujas del reloj o contrario a ellas, dependiendo de los parámetros dados, veamos un ejemplo:
Ejemplo
En este siguiente ejemplo, rotaremos nuestro elemento 40 grados (40deg) a la derecha, también crearemos otro elemento que rote -50 grados en sentido contrario, es algo muy simple de hacer, veamos cómo se hace.
Podría interesarte
Curso CSS Transiciones Paso a Paso
scale()
Con el método scale() podemos incrementar las dimensiones aplicadas originalmente a un elemento, es decir, si tienes un elemento con un width de 50px y un height de 50px, con este método logramos modificar esas medidas a modo de animación, en nuestro siguiente ejemplo veremos cómo funciona.
Ejemplo
En este ejemplo, crearemos dos elementos div a los cuales le daremos inicialmente unas dimensiones predeterminadas, las cuales aumentarán en el primer div y disminuirán en su tamaño, en el segundo.
EXPLICACIÓN: Lo único que hicimos fue, crear dos elementos y darle sus respectivas medidas, luego utilizamos la pseudoclase hover para ver mejor la transformación, por eso cuando pasas el mouse sobre el, este crece en ambos lados, de acuerdo a lo especificado en la propiedad transform.
En el segundo elemento pasa todo lo contrario a lo explicado anteriormente, puesto que lo que hicimos fue, en lugar de aumentar su tamaño, lo disminuimos.
scaleX() y scaleY()
Muy parecido a scale(), con la diferencia de que con scaleX() y scaleY() podremos incrementar o disminuir el ancho y alto, respectivamente, de un elemento, con scale() cambiamos ambos tamaños del elemento, al mismo tiempo, pero con scaleX() y scaleY() lo hacemos de forma independiente, veamos un ejemplo:
Ejemplo
En este ejemplo, incrementaremos el ancho de un elemento, en 3 veces su tamaño establecido de inicio. y el alto de otro elemento, también con 3 veces su alto original.
EXPLICACIÓN: Recordar que asi como aumentamos su ancho y su alto, también se puede disminuir, eso depende del caso en cuestión.
skew()
El método skew() nos permite sesgar, o lo que es lo mismo, inclinar tanto en el eje X, como en el eje Y, un elemento basándose en los ángulos proporcionados como argumentos. este método, también cuenta con sus similares, skewX y skewY(), los cuales veremos dentro de poco. mientras tanto, veamos cómo funciona, el método skew().
Ejemplo
En este ejemplo, trataremos de inclinar el elemento 40 grados en el eje X y 10 grados en el eje Y, veamos que sucede
skewX() y skewY()
Con el método skew() podemos sesgar o girar un elemento a ambos lados a la vez, es decir, en ambos ejes, pero también lo podemos hacer de forma independiente, utilizando los métodos, skewX() para el eje X y skewY() para sesgar el eje Y, veamos un ejemplo de ambos.
Ejemplo
En este ejemplo, le daremos grados distintos a los elementos, de esta forma, es más sencillo ver lo que sucede con cada uno de ellos.
matrix()
El método matrix() hace la función de shorthand, ya que envuelve a los métodos anteriores, este posee su propia nomenclatura, que la componen seis parámetros, con los cuales podemos rotar, escalar, mover y sesgar elementos.
Este se compone de la siguiente forma:
matrix (scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
Ejemplo
rotateX(), rotateY() y rotateZ()
Por último, tenemos tres métodos que nos sirven para crear transformaciones 3D, ya que CSS también soporta este tipo de transformaciones, hablamos de rotateX(), rotateY() y rotateZ(), veamos cómo funcionan estos métodos.
Por el momento, esto ha sido todo con lo que respecta a las animaciones CSS, pero eso no es todo, lo mejor está por llegar, la idea es conocer todo CSS y sus dependencias, pero como mencionamos al inicio, quisimos hacer un curso no lineal, elaborado para personas que solo deseen aprender en caso de no saber, o reforzar si ya cuentas con las bases en ciertas áreas específicas, solo para salir un poco de lo tradicional, pero al final quedara el curso completo serán cubiertas todas las áreas posibles de principio a fin.
Si te fue de ayuda, recuerda compartirlo en tus redes sociales con tus amigos y conocidos, y no olvides darle like a nuestra página en facebook, PlanetaGeekhn es un proyecto de reciente creación, por lo que es necesario tu apoyo para que la comunidad crezca. Hasta pronto
Redes Sociales