Generador de transform CSS
Genera valores transform de CSS: translate, rotate, scale, skew y perspective 3D, rotateX/rotateY y translateZ, con transform-origin y vista previa en vivo.
Ajustes predefinidos
Transformaciones 2D
Transformaciones 3D
Perspectiva 0 significa ninguna. Las rotaciones 3D se ven planas sin perspectiva.
Origen de la transformación
Vista previa
El contorno discontinuo muestra el elemento sin transformar; el punto rojo es el origen de la transformación.
transform: none;
Herramientas Relacionadas
Ver Todas¿Qué es Generador de transform CSS?
Combina funciones de transformación CSS con deslizadores: translate, rotate, scale y skew en 2D, y perspective, rotateX, rotateY y translateZ en 3D. Un contorno discontinuo en la vista previa muestra la posición original y un punto rojo marca el origen de la transformación.
Cómo usar Generador de transform CSS
- Elige un ajuste predefinido (Inclinación 3D, Volteo, Inclinado, Zoom, Tarjeta 3D) o empieza desde Ninguna.
- Ajusta Mover X/Y, Rotar, Escalar X/Y y Sesgar X/Y en Transformaciones 2D.
- Ajusta Perspectiva, Rotar X, Rotar Y y Mover Z en Transformaciones 3D.
- Elige el Origen de la transformación en la lista o indica Posición X/Y.
- Copia el código CSS.
Ejemplo
Mover X 20px, Rotar 45°, Escalar X 1,5, Escalar Y 1,5
transform: translate(20px, 0) rotate(45deg) scale(1.5);
Cuándo usar Generador de transform CSS
Úsalo para efectos hover, volteos de tarjetas, escaparates 3D inclinados y desplazamientos de posición precisos. Las transformaciones no afectan al diseño (los elementos de alrededor no se mueven); para cambiar el diseño usa márgenes, flexbox o grid. Combínalo con el Generador de animaciones CSS para animar entre transformaciones.
Cómo funciona Generador de transform CSS
Las funciones solo se escriben cuando no son neutras, en este orden: perspective(), translate(), translateZ(), rotateX(), rotateY(), rotate(), scale(), skew(). Las transformaciones se aplican de derecha a izquierda respecto al elemento, así que el orden cambia el resultado; perspective() debe ir primero para afectar a las funciones 3D posteriores. Una escala X/Y igual se escribe como un único scale(n). transform-origin solo se genera cuando difiere del centro predeterminado (50% 50%).
Casos de Uso Comunes
- Tarjetas de producto inclinadas en 3D
- Efectos de volteo de tarjetas con rotateY(180deg)
- Zoom al pasar el ratón sobre imágenes
- Etiquetas de sección inclinadas con skew
- Trucos de centrado con translate(-50%, -50%)
Preguntas Frecuentes
¿Qué diferencia hay entre perspective() y la propiedad perspective?
perspective() dentro de transform solo se aplica a ese elemento. La propiedad perspective en un elemento padre crea un espacio 3D compartido para todos sus hijos.
¿Por qué mi rotación 3D se ve plana?
Sin perspectiva no hay escorzo de profundidad. Ajusta la Perspectiva a un valor como 800px.
¿transform afecta al diseño?
No. El elemento conserva su espacio original en el diseño; solo se mueve, rota o escala su representación.