Transform-Origin Visualizer 🌐

Transform-Origin Visualizer es una herramienta interactiva que permite visualizar y ajustar el punto de origen de transformación (transform-origin) de una caja en tiempo real. 🎨🔧

🚀 ¿Qué hace?

• Ajuste en tiempo real: Modifica el origen de transformación de una caja y observa cómo se actualiza instantáneamente. Ideal para diseñadores y desarrolladores web que desean experimentar con la propiedad CSS transform-origin y ver cómo afecta a sus elementos. ✨
• Interactividad: Usa entradas numéricas y unidades en píxeles o porcentajes para ajustar el ancho, alto y el punto de origen. También puedes hacer clic en la vista previa para ajustar la posición del punto de transformación. 🖱️📏
• Visualización: Muestra el código CSS generado y actualizado dinámicamente, facilitando la integración en tus proyectos. 🖋️

📜 Cómo usarlo

1. Ajusta los parámetros: Modifica el ancho, la altura y el punto de origen utilizando los controles disponibles.
2. Visualiza los cambios: Observa cómo el punto de transformación se mueve en la vista previa.
3. Copia el código: El código CSS generado se actualiza automáticamente y está listo para ser copiado e integrado en tu proyecto.

🛠️ Tecnologías usadas

• HTML para la estructura
• CSS para el estilo y animaciones
• JavaScript para la lógica y funcionalidad interactiva
• Highlight.js (CDN) para el resaltado de sintaxis