Generador de transformaciones 3D en CSS
Crea tarjetas y cubos 3D con sliders y copia el CSS al momento
Mueve los sliders de rotación (X/Y/Z), perspectiva, desplazamiento y escala y observa en una vista previa en vivo cómo quedan los efectos de tarjeta y cubo 3D. Está pensada para maquetadores y desarrolladores front-end que montan efectos hover en tarjetas o animaciones de cubos: en lugar de ir a ciegas probando valores, ves el resultado mientras ajustas. Todo el renderizado y el cálculo ocurren en el navegador, así que no se envía ningún dato a un servidor.
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Cómo usar
- Elige el modo de tarjeta 3D o de cubo 3D.
- Ajusta los sliders de Rotate X/Y/Z, perspectiva, Translate Z y escala mientras observas los cambios en la vista previa.
- Cuando tengas el resultado que buscas, usa el botón de copiar para llevarte el CSS generado que aparece abajo.
- Si los valores se te descontrolan, el botón de reinicio los devuelve a su estado inicial.
Preguntas frecuentes
- ¿Por qué es tan importante el valor de perspective?
- Sin perspective no hay sensación de profundidad al rotar. Cuanto menor es el valor, más pronunciada resulta la distorsión; cuanto mayor, más plano se ve el elemento.
- ¿Puedo usar el CSS generado tal cual?
- Sí. El código copiado ya incluye las propiedades transform, transform-style y transition, así que basta con que las clases coincidan para que funcione.
- ¿Qué debo tener en cuenta para que la animación de transformación 3D no se vea entrecortada?
- La propiedad transform está acelerada por GPU y normalmente se renderiza con fluidez, pero si al elemento padre le falta overflow: hidden o la propiedad backface-visibility, es posible que se transparente el reverso de la tarjeta o que la animación se vea entrecortada. Aplicar efectos 3D a demasiados elementos a la vez también puede bajar la tasa de fotogramas en dispositivos menos potentes, así que es mejor reservarlos solo para los elementos que realmente lo necesitan.