Escrito por Laura Chuburu
Las transformaciones CSS permiten modificar la escala, rotación, sesgado, o el desplazamiento de un elemento. Trabajan en base a los ejes X e Y.
Es importante para la sintaxis de esta propiedad observar que no se deja espacio antes de los paréntesis.
Permite agrandar o achicar un elemento respecto de su tamaño original. Se determina un número que indica proporción, de modo que si ponemos un dos, estaremos duplicando su tamaño, y si ponemos 0.5 estaremos reduciendo a la mitad. En el caso de usar un solo número la transformación se aplicará proporcionalmente sobre ambos ejes. Si indicamos dos números separados por coma, el primer número corresponde al eje X y el segundo al eje Y.div { transform: scale(2) }
div { transform: scale(2, 0.5) }
Nos permite girar un objeto en sentido horario (con un número positivo) o antihorario (negativo), se expresa en grados utilizando la abreviatura en inglés deg (degrees).div { transform: rotate(45deg) }
Permite inclinar un objetodiv { transform: skew(30deg, 0) }
Permite mover un objeto en diferentes direcciones.div { transform: translate(0, 200px) }
Usualmente las opciones de transformación no se utilizan por si solas sino que se las combina con la propiedad transition que vamos a ver a cotinuación. Esta permite generar desde pequeños efectos que se pueden aplicar a la instancia hover de un botón, o crear animaciones más complejas sumando otras propiedades.
Esta propiedad permite hacer un pasaje gradual entre las propiedades que cambian en dos instancias de un elemento, controlando además la velocidad y en animaciones más avanzadas el modo en que se ejecuta la transición.
Por ejemplo, supongamos que tenemos un botón con un color en su estado normal y otro diferente en el hover. El pasaje entre ambos estados se produce de manera abrupta. En cambio si usamos la propiedad transition logramos que el cambio de color sea gradual.
El control de una transición incluye las siguientes propiedades:
Determina la o las propiedades a ser animadas; puede ser cualquier propiedad CSS. Si tenemos muchas propiedades sobre las que aplicar la transición, se utiliza la palabra all, de modo que se aplique a la vez sobre todas ellas.
Indica la duración de la animación desde el inicio al fin y se expresa en segundos (s). Por defecto el valor es 0.
Definen la curva de aceleración que se va a aplicar: ease (por defecto), linear (contínua), ease-in, ease-out (la transición terminará ralentizándose) y ease-in-out (la transición comienza y finaliza con lentitud). En animaciones pequeñas como el hover de un botón no son muy notorias, por lo general para estos casos dejamos la opción por defecto.
Define el tiempo que tarda en ejecutarse la transición.
Como vimos en otras propiedades CSS, existe una forma corta de escribir la propiedad transition:div { transition: all 0.5s ease 0.5s }
Los prefijos son palabras que se anteponen a determinadas propiedades CSS3 para que los navegadores puedan interpretarlas. Generalmente se usan junto a propiedades que son muy nuevas o están en etapa experimental. Cada navegador tiene un prefijo determinado.
Actualmente la mayoría de los navegadores soportan CSS3 así que sólo son necesarios si queremos asegurarnos que nuestro sitio se vea en determinada versión de navegador.
Los prefijos utilizados son los siguientes:
-webkit- para Chrome y Safari
-moz- para Mozilla
-o- para Ópera
-ms- para Explorer
Como ejemplo lo vemos aplicado a la propiedad transition:div { -webkit-transition: all 0.5s ease 0.5s; */ Para Chrome y Safari */
-moz-transition: all 0.5s ease 0.5s; */ Para Mozilla */
-o-transition: all 0.5s ease 0.5s; */ Para Ópera */
-ms-transition: all 0.5s ease 0.5s; */ Para Explorer */
transition: all 0.5s ease 0.5s }
Como vemos en el ejemplo, primero se escribe la propiedad con cada uno de los prefijos, y luego se escribe también normalmente, porque se considera que a partir de ciertas versiones esa es la propiedad aceptada.
Si tenemos dudas respecto de la compatibilidad de una propiedad con los navegadores podemos consultar el sitio https://caniuse.com/
