Las transformaciones en CSS permiten modificar la forma y la posición de los elementos HTML. Con las transformaciones, los elementos pueden rotarse, escalar, sesgar o traducirse.
Aquí hay un ejemplo de cómo funciona:
```css
/* Este código CSS rota un elemento HTML 45 grados alrededor del centro. */
div {
transform: rotate(45deg);
}
```
Aquí hay un vistazo a las diferentes funciones de transformación:
1. translate(): Mueve el elemento a lo largo del eje X (de izquierda a derecha) y el eje Y (de arriba abajo). Por ejemplo, `transform: translate(50px, 100px)` mueve el elemento 50px a la derecha y 100px hacia abajo.
2. scale(): Cambia el tamaño del elemento. `scale(2, 2)` duplica el tamaño del elemento.
3. rotate(): Gira el elemento alrededor de su punto de origen. Por ejemplo, `rotate(45deg)` gira el elemento 45 grados en sentido horario.
4. skew(): Inclina un elemento a lo largo del eje X o Y. Por ejemplo, `skew(20deg, 10deg)` inclina el elemento 20 grados a lo largo del eje X y 10 grados a lo largo del eje Y.
Puede combinar transformaciones aplicando múltiples en el mismo elemento, por ejemplo:
```css
/* Este código CSS mueve el elemento 50px a la derecha y 100px hacia abajo, luego gira el elemento 45 grados en sentido horario. */
div {
transform: translate(50px, 100px) rotate(45deg);
}
```
Recuerda que las Transformaciones CSS no se aplican a los elementos con `display: static`, que es el valor predeterminado para la mayoría de los elementos. En su lugar, debes usar `display: block` o `display: inline-block`.
Finalmente, es importante tener en cuenta que la propiedad de transformación es compatible con todos los navegadores modernos, pero para versiones más antiguas de Internet Explorer, es posible que debas usar el prefijo `-ms-`.
