Descripción
La propiedad transform
de CSS nos permite aplicar transformaciones 2D o 3D a elementos HTML. Con esta propiedad podemos rotar, escalar, mover, sesgar o aplicar matrices de transformación a los elementos.
Para ello nos apoyamos en una serie de funciones que nos permiten realizar las transformaciones. Las principales funciones son rotate()
, scale()
, translate()
y skew()
.
Sintaxis
transform : none | <transform-list>
Valores
- none, valor por defecto que indica que no se aplicará ninguna transformación al elemento,
- transform-list, lista de una o más funciones de transformación separadas por espacios que se aplicarán al elemento en el orden especificado,
Ejemplo
Veamos un ejemplo de cómo podemos aplicar una transformación a un elemento HTML mediante la propiedad transform
. En este caso vamos a rotar un elemento 45 grados.
.elemento {
transform: rotate(45deg);
}