https://github.com/creatlydev/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. 🎨🔧
https://github.com/creatlydev/transform-origin-visualizer

css3 html5 interactive-visualizations javascript transform-origin

Last synced: about 1 month ago
JSON representation

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. 🎨🔧

• Host: GitHub
• URL: https://github.com/creatlydev/transform-origin-visualizer
• Owner: Creatlydev
• Created: 2024-07-26T17:52:35.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-07-28T04:02:50.000Z (5 months ago)
• Last Synced: 2024-07-28T05:23:06.580Z (5 months ago)
• Topics: css3, html5, interactive-visualizations, javascript, transform-origin
• Language: CSS
• Homepage: https://transform-origin-visualizer.netlify.app/
• Size: 405 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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