Transformaciones CSS
La propiedad CSS transform permite rotar, escalar, trasladar o inclinar elementos. Así se crean efectos dinámicos y atractivos sin modificar el tamaño o posición real del elemento.
Ejemplo básico de uso de transform
En este ejemplo, un cuadro se rota 45 grados al hacer hover. Con una transición, la rotación ocurre de manera gradual.
El ejemplo muestra el uso de rotate(), que gira el elemento un ángulo específico.
Principales funciones de transform
Transform puede modificar los elementos de varias formas: rotación, escala, traslación e inclinación. Se pueden combinar para efectos más complejos.
| Función | Descripción |
|---|---|
| rotate() | Rota el elemento un ángulo específico (ej. rotate(45deg)). |
| scale() | Escala el elemento para agrandarlo o reducirlo (ej. scale(1.5)). |
| translate() | Traslada el elemento en los ejes X e Y (ej. translate(50px, 20px)). |
| skew() | Inclina el elemento en los ejes X e Y (ej. skew(20deg, 10deg)). |
Consejos para usar transform
Transform es una herramienta poderosa para manipular elementos visualmente. Aquí algunos consejos:
- Combina transform con transiciones o animaciones para movimientos más fluidos.
- Usa la propiedad transform-origin para definir desde dónde ocurrirá la rotación o el escalado.
- Recuerda que transform no afecta el layout alrededor del elemento, solo su apariencia visual.
✨ Pregunta a Lara — tu compañera de estudio con IA
Desbloquea soporte de aprendizaje personalizado. Lara puede explicar lecciones, resumir temas y responder tus preguntas — disponible desde el plan Go y superiores.
Lara te ayuda a aprender más rápido — exclusivo para los miembros ReadyTools Go, Plus y Max.
Seleccionar idioma
Establecer tema
© 2025 ReadyTools. Todos los derechos reservados.