Simulación de origen de transformación con traducción: una guía completa

Comprensión de origen de transformación

La propiedad de origen de transformación especifica el Punto alrededor del cual se transforma un elemento. Establecer esta propiedad nos permite controlar la rotación, escala o inclinación de un elemento con mayor precisión.

Simulación de Transform-Origin con Translate

La documentación oficial de CSS establece que el origen de la transformación se puede simular mediante la transformación de traducción. El proceso es el siguiente:

• Traducir el elemento por el valor negado de la propiedad de origen de transformación.
• Aplicar la transformación deseada (por ejemplo, escalar, rotar).
• Traduce el elemento nuevamente por el valor de la propiedad transform-origin.

Solución de problemas de resultados incorrectos

Si tus intentos de simular transform-origin con falla en la traducción, es posible que haya encontrado uno de dos errores comunes:

Error 1: Orden de traducción incorrecto

La simulación del origen de transformación implica tres operaciones de traducción: la inicial negada traducción, la transformación deseada y la traducción positiva final. Es fundamental ejecutar estas traducciones en el orden correcto.

Ejemplo:

.translate {
  transform: translate(-100px, -100px) translate(100px, 0px) scale(2) rotate(45deg) translate(100px, 100px);
}

En este ejemplo, la traducción inicial es correcta, pero la traducción final debe ser traducir(100px, 100px) en lugar de traducir(-100px, -100px) para negar la traducción inicial y restaurar el elemento a su posición original.

Error 2: Origen de transformación no coincidente

Asegúrese de que tanto el elemento original con origen de transformación como el elemento simulado con traducción tengan el mismo origen de transformación . El origen de transformación predeterminado es el centro del elemento y es crucial establecerlo explícitamente en ambos casos o dejarlo como predeterminado.

Ejemplo:

.translate {
  transform-origin: 0 0;
  transform: translate(-50px, -50px) rotate(45deg) scale(2) translate(50px, 50px);
}

Aquí, el origen de transformación se ha establecido explícitamente en la esquina superior izquierda del elemento, que coincide con el origen de transformación predeterminado del elemento original.

Conclusión

Al corregir estos errores y garantizar el orden de traducción y el origen de transformación adecuados, puede simular eficazmente el origen de transformación mediante la transformación de traducción. Esta técnica abre varias posibilidades creativas para la manipulación y animación de elementos en CSS.