El uso de la propiedad transform en CSS ha revolucionado la forma en que los desarrolladores web pueden manipular elementos en una página. transform permite aplicar varias transformaciones gráficas a un elemento, como rotaciones, escalados, traslaciones e inclinaciones, todo sin afectar el flujo del documento. Este artículo te guiará a través de los conceptos básicos, las diferentes transformaciones disponibles y ejemplos prácticos de cómo usar transform en tus proyectos web.
¿Qué es la Propiedad transform?
La propiedad transform en CSS permite modificar el espacio de coordenadas de un elemento, aplicando transformaciones gráficas como rotaciones, escalas, traslaciones e inclinaciones. Estas transformaciones pueden ser 2D o 3D.
Sintaxis Básica
transform: none | transform-functions;
- none: No se aplica ninguna transformación.
- transform-functions: Una o más funciones de transformación, separadas por espacios.
Funciones de Transformación
1. translate()
La función translate() mueve un elemento desde su posición actual. Acepta valores para el eje X e Y.
transform: translate(50px, 100px);
2. rotate()
La función rotate() gira un elemento alrededor de un punto de origen definido (por defecto, el centro del elemento). Acepta un valor en grados (deg), radianes (rad), giros (turn), etc.
transform: rotate(45deg);
3. scale()
La función scale() redimensiona un elemento. Acepta valores de escala para el eje X e Y. Un valor de 1 significa sin cambio, mientras que valores mayores o menores que 1 aumentan o disminuyen el tamaño respectivamente.
transform: scale(1.5, 0.5);
4. skew()
La función skew() inclina un elemento en los ejes X e Y. Acepta valores en grados para cada eje.
transform: skew(30deg, 20deg);
5. matrix()
La función matrix() permite aplicar una transformación combinada en una sola función, utilizando una matriz de 2D.
transform: matrix(1, 0, 0, 1, 50, 100);
6. 3D Transformations
Además de las transformaciones 2D, transform también soporta transformaciones 3D, como rotate3d(), translate3d(), scale3d(), etc.
Ejemplo: rotate3d()
transform: rotate3d(1, 1, 0, 45deg);
Usar transform en CSS: Ejemplos Prácticos
Rotar un Elemento
CSS
.rotar {
transform: rotate(45deg);
}
html
<div class="rotar">Este texto está rotado 45 grados.</div>