La propiedad `transform` te permite manipular elementos visualmente (trasladar, rotar, escalar y sesgar) sin afectar el flujo del DOM. Es el arma secreta para crear animaciones fluidas, ya que las transformaciones son calculadas directamente por la GPU (Hardware Acceleration) en lugar del hilo principal del CPU.
1El Ancla de Origen (transform-origin)
Por defecto, los elementos rotan y se escalan desde su centro exacto (50% 50%). Usa transform-origin para alterar este punto de pivote.
- →Pivote: Configurar
transform-origin: top lefthace que una rotación se sienta como una puerta balanceándose. - →Control Preciso: Puedes usar píxeles, porcentajes o palabras clave. Comprender el origen es la diferencia entre una animación errática y un movimiento mecánico profesional.
2Construyendo el Espacio 3D
El CSS no es solo un lienzo plano. Al usar la propiedad perspective en un contenedor padre, defines a qué distancia virtual se encuentra el usuario del plano 'z=0', activando el motor 3D.
- →rotateX / rotateY: Voltea elementos hacia el fondo o hacia adelante.
- →translateZ: Acerca elementos a la cámara del usuario o los aleja.
- →backface-visibility: Controla si la cara posterior de un elemento es visible cuando se voltea (crucial para efectos de tarjetas giratorias).
