Generador de transformaciones CSS.
Generador de transformaciones CSS gratuito en línea, sin necesidad de instalación. Editor visual para editar propiedades de transformación.
Acerca de CSS Transform
Construye de forma interactiva una declaración transform con controles deslizantes para translate (X/Y/Z), scale (X/Y), rotate (Z/X/Y) y skew (X/Y), además de un transform-origin editable y un tamaño de caja de vista previa ajustable. El CSS generado usa translate3d para las traslaciones, combina scale/rotate/rotateX/rotateY/skew solo cuando se modifican y los emite junto con transform-origin.
Cómo usarlo
1. Arrastra los controles deslizantes bajo Translate, Scale, Rotate y Skew para componer un transform; cada valor también cuenta con un campo numérico para introducir valores precisos. 2. Ajusta el Box Size de la vista previa (50–250px) y edita Transform-Origin (cualquier cadena CSS de origen, por defecto 50% 50%). 3. Haz clic en Reset para devolver todos los valores a sus valores neutros por defecto. 4. Haz clic en Copy para copiar tanto la declaración transform: ... como transform-origin: ....
Funciones Transform y rangos
translateX/Y/Z: de -200 a 200 px, se emiten juntos como translate3d(x, y, z) cuando alguno es distinto de cero. scaleX/Y: de 0,1 a 3, se emiten como scale(x, y) cuando alguno difiere de 1. rotate (Z): de -360 a 360deg. rotateX/Y: de -180 a 180deg. skewX/Y: de -60 a 60deg, se emiten como skew(x, y) cuando alguno es distinto de cero. Si no se modifica ninguna función, la salida es transform: none.
▶¿Por qué mi rotación solo se muestra en 3D pero el elemento parece plano?
▶¿La salida incluye transform-origin?
▶¿Puedo escribir valores exactos en lugar de arrastrar?
▶¿Por qué translate genera un translate3d aunque solo haya movido un eje?
Si este herramienta le ha sido útil, considere comprarme un café.
Compra un café para mí.