Generador de Transform CSS
Opciones
Demo
Translate
Scale
Rotate
Skew
Origin & 3D
Vista previa en vivo
Front
Back
Estado
inactivo
¿Qué es el generador de Transform CSS?
Esta herramienta le ayuda a crear valores de `transform` CSS para `translate`, `scale`, `rotate`, `skew` y transformaciones 3D.
Es útil para efectos hover, tarjetas animadas, elementos inclinados, giros 3D, insignias y componentes interactivos de interfaz.
Cómo utilizar el generador de transformaciones CSS
- Introduzca valores de `translate`, `scale`, `rotate`, `skew` y `transform-origin`.
- Utilice la vista previa en vivo para ver el efecto visual.
- Haga clic en Generar para producir un valor de `transform` CSS normalizado.
- Pegue un valor `transform` existente para analizarlo y editarlo.
Consejos
- {:"El orden de las transformaciones importa"=>"cambiar el orden de las funciones cambia el resultado."}
- Utilice `perspective` con `rotateX` y `rotateY` para conseguir efectos 3D más marcados.
- preserve-3d es útil cuando las capas secundarias necesitan una profundidad 3D real.
- `backface-visibility: hidden` es útil para efectos de giro de tarjetas.
Herramientas relacionadas
Estas herramientas también pueden resultarle útiles.
Generador de Clip-Path CSS
Genere y analice valores de `clip-path` CSS para formas `polygon`, `circle`, `ellipse` e `inset`.
Utilidades varias
›
Generador de radio de borde CSS
Genere y analice valores de radio de borde CSS con vista previa en vivo.
Utilidades varias
›
Generador de gradiente CSS
Genere, analice y obtenga una vista previa de degradados lineales y radiales CSS en línea. Generador de gradientes gratuito para desarrolladores y diseñadores.
Utilidades varias
›
Generador/analizador de Box Shadow CSS
Genere, analice y previsualice valores de `box-shadow` CSS en línea. Ajuste offset, blur, spread, color e `inset`.
Utilidades varias
›
Preguntas frecuentes sobre el generador de transformaciones CSS
¿Puede esta herramienta generar valores de rotación y traslación?
Sí. Admite `translateX`, `translateY`, `rotate`, `scaleX`, `scaleY`, `skewX` y `skewY`.
¿Puedo analizar un valor `transform()` existente?
Sí. Pegue un valor de `transform` en el cuadro de entrada y haga clic en Analizar.
¿Importa `transform-origin`?
Sí. Controla el punto de pivote utilizado para escalar y rotar.
¿Hay una vista previa en vivo?
Sí. La vista previa se actualiza a medida que cambian los controles de transformación.
¿Qué es el generador de Transform CSS?
Esta herramienta le ayuda a crear valores de `transform` CSS para `translate`, `scale`, `rotate`, `skew` y transformaciones 3D.
Es útil para efectos hover, tarjetas animadas, elementos inclinados, giros 3D, insignias y componentes interactivos de interfaz.
Cómo utilizar el generador de transformaciones CSS
- Introduzca valores de `translate`, `scale`, `rotate`, `skew` y `transform-origin`.
- Utilice la vista previa en vivo para ver el efecto visual.
- Haga clic en Generar para producir un valor de `transform` CSS normalizado.
- Pegue un valor `transform` existente para analizarlo y editarlo.
Consejos
- {:"El orden de las transformaciones importa"=>"cambiar el orden de las funciones cambia el resultado."}
- Utilice `perspective` con `rotateX` y `rotateY` para conseguir efectos 3D más marcados.
- preserve-3d es útil cuando las capas secundarias necesitan una profundidad 3D real.
- `backface-visibility: hidden` es útil para efectos de giro de tarjetas.
Herramientas relacionadas
Estas herramientas también pueden resultarle útiles.
Generador de Clip-Path CSS
Genere y analice valores de `clip-path` CSS para formas `polygon`, `circle`, `ellipse` e `inset`.
Utilidades varias
›
Generador de radio de borde CSS
Genere y analice valores de radio de borde CSS con vista previa en vivo.
Utilidades varias
›
Generador de gradiente CSS
Genere, analice y obtenga una vista previa de degradados lineales y radiales CSS en línea. Generador de gradientes gratuito para desarrolladores y diseñadores.
Utilidades varias
›
Generador/analizador de Box Shadow CSS
Genere, analice y previsualice valores de `box-shadow` CSS en línea. Ajuste offset, blur, spread, color e `inset`.
Utilidades varias
›
Preguntas frecuentes sobre el generador de transformaciones CSS
¿Puede esta herramienta generar valores de rotación y traslación?
Sí. Admite `translateX`, `translateY`, `rotate`, `scaleX`, `scaleY`, `skewX` y `skewY`.
¿Puedo analizar un valor `transform()` existente?
Sí. Pegue un valor de `transform` en el cuadro de entrada y haga clic en Analizar.
¿Importa `transform-origin`?
Sí. Controla el punto de pivote utilizado para escalar y rotar.
¿Hay una vista previa en vivo?
Sí. La vista previa se actualiza a medida que cambian los controles de transformación.