jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas CSS

Gratis Generador de Transformaciones 3D CSS

Cree transformaciones 3D CSS con un editor visual que permite ajustar rotateX, rotateY, rotateZ, scale, translate3d, perspective y transform-origin mediante controles deslizantes.

Cargando herramienta...

Qué es Generador de Transformaciones 3D CSS?

El Generador de Transformaciones 3D CSS es una herramienta visual para crear transformaciones CSS tridimensionales. Permite rotar, mover y escalar elementos en el espacio 3D.

Respuesta rápida

Cree visualmente transformaciones 3D CSS ajustando rotateX, rotateY, rotateZ, scale, translate3d, perspective y transform-origin. Copie la propiedad CSS transform completa.

Last updated: 2026-06-11

Limitaciones

  • Esta herramienta genera una transformación 3D de un solo elemento.
  • La vista previa usa una tarjeta 2D estática.
  • Las transformaciones 3D pueden causar artefactos en Safari.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Ajuste los controles deslizantes rotateX, rotateY y rotateZ para inclinar la tarjeta de vista previa.
  2. Establezca el valor de perspectiva. Valores pequeños (200-400px) crean efectos 3D más fuertes.
  3. Ajuste translateX, translateY y translateZ para reposicionar el elemento.
  4. Escale el elemento si es necesario y establezca el punto transform-origin.
  5. Active Preserve 3D para elementos anidados. Copie el CSS.

Para qué puedes usarla

  • Crear un efecto de inclinación de tarjeta sutil al pasar el ratón.
  • Construir una animación de giro 3D para una tarjeta de precios.
  • Diseñar una sección hero con un elemento decorativo de profundidad perspectiva.

Casos de uso

Ejemplos prácticos

Ejemplo

Inclinación de tarjeta seguimiento de ratón

Un desarrollador prueba rotateY a 25deg y rotateX a -10deg. La tarjeta muestra una inclinación hacia la derecha.

Ejemplo

Elevación de tarjeta de precio destacada

Un diseñador establece translateZ a 30px con perspective 800px. La tarjeta parece elevada en el espacio 3D.

Errores comunes

  • Establecer perspective en el elemento transformado en lugar de su padre.
  • Usar translateZ sin establecer perspective.
  • Rotar un elemento más allá de 90deg sin backface-visibility: hidden.

Verificación

  1. Establezca rotateY en 30deg y rotateX en -15deg. Verifique rotateY(30deg) rotateX(-15deg).
  2. Establezca perspective en 300px y rotateY en 45deg. El efecto 3D debería ser más dramático.

FAQ

Preguntas sobre Generador de Transformaciones 3D CSS

Cual es la diferencia entre perspective y transform: perspective()?

perspective en el padre crea un espacio 3D compartido. transform: perspective() da a cada elemento su propia perspectiva.

Por que mi elemento transformado en 3D se ve plano?

El padre necesita transform-style: preserve-3d. Sin esto, los hijos se aplanan en el plano 2D del padre.

Las transformaciones 3D CSS funcionan en todos los navegadores?

Sí, en todos los navegadores modernos. Safari tiene ocasionalmente errores de renderizado.

Herramientas relacionadas

Más herramientas css

Prueba también

Prueba también