La primera vez a rotateY Estaba seguro de que inclinaría una carta hacia la pantalla, simplemente la aplasté, perdí la mayor parte de una tarde antes de entender por qué. No había perspectiva. Había escrito la rotación pero no la función que hace que una rotación se lea como profundidad, y CSS hizo exactamente lo que le dije en lugar de lo que quise decir. Esa tarde es la razón por la que ahora construyo transformaciones arrastrando controles deslizantes y viendo responder una caja, en lugar de escribir un valor, guardar, refrescar y entrecerrar los ojos.
El CSS transform la propiedad es una de las cosas más útiles del lenguaje y una de las más fáciles de equivocar sutilmente. Mueve, gira, escala y distorsiona un elemento sin alterar nada a su alrededor, razón por la cual cada efecto flotante, cada elevación de tarjeta, cada animación de entrada se apoya en él. Pero reúne mucho comportamiento en una cadena corta, el orden de las funciones cambia el resultado y las funciones 3D tienen una dependencia que es invisible hasta que lo golpeas. Un valor que puedes ver construido vale mucho más que un valor que tienes que imaginar.
los Generador de transformadas CSS le brinda un control deslizante para cada función, traducir, rotar, escalar, sesgar y el trío 3D de rotarX, rotarY y perspectiva, y aplica cada cambio a un elemento de vista previa en vivo a medida que lo realiza. También le permite configurar el origen de la transformación, el punto de anclaje alrededor del cual giran las rotaciones y el escalado. La declaración exacta se encuentra en un cuadro listo para copiar a continuación, que contiene solo las funciones que tocó.
TL;Dr: El CSS
transformla propiedad reposiciona y remodela un elemento sin afectar el diseño de la página, que es lo que lo convierte en la herramienta adecuada para efectos flotantes y animación. Las funciones se aplican de derecha a izquierda, por lo que el orden importa; Las rotaciones 3D necesitan unperspective()parecer tridimensional; y cualquier elemento transformado se convierte en un bloque contenedor para sus hijos fijos y absolutos. Este generador expone cada función con una vista previa en vivo, emite solo las funciones que cambia y produce CSS limpio que puede pegar directamente en una hoja de estilo. Se ejecuta completamente en su navegador sin registrarse.
¿qué problema resuelve un generador de transformada CSS?
los transform la propiedad es abstracta de la misma manera que CSS Grid es abstracta. No estás moviendo píxeles directamente; estás describiendo una operación geométrica y permitiendo que el navegador calcule el resultado. translateX(40px) rotate(15deg) scale(1.1) es una instrucción precisa, pero no hay forma de sentir el resultado de encadenar esos tres solo del texto. Tienes que renderizarlo. Y renderizarlo en tu propio proyecto significa el bucle de escritura, guardado y actualización, que es lo suficientemente lento como para que la mayoría de las personas dejen de experimentar mucho antes de haber encontrado el valor que desean.
Un generador colapsa ese bucle en nada. Arrastras el control deslizante de rotación y la caja gira en tiempo real. Subes la escala y crece desde su centro. Agregas un traductor y se desliza manteniendo su turno. Diez minutos de esto y la relación entre los números y el movimiento deja de ser algo que traduzcas en tu cabeza y se convierte en algo que sientes. Cuando terminas, no hay nada que transcribir, porque el CSS que funciona ha sido escrito para ti todo el tiempo.
Hay un segundo beneficio que importa más de lo que parece. Construir la transformación mediante manipulación significa que la herramienta solo puede emitir CSS válido y bien formado. No se puede producir una rotura transform valor al arrastrar un control deslizante, para que la salida siempre sea segura para pegar. Esa confiabilidad es la razón por la que mantengo cerca un estante de compiladores visuales de CSS, la misma razón por la que busco generador de sombras de caja en lugar de contar compensaciones de sombras a mano.
¿Por qué importa el orden de las funciones de transformación?
Este es el único detalle que hace tropezar a la gente y vale la pena comprenderlo en lugar de solucionarlo. Cuando enumera varias funciones en una transform, el navegador los aplica de derecha a izquierda, operando cada uno en el espacio de coordenadas dejado por el anterior. Eso significa que el orden realmente cambia donde termina el elemento.
Tomar translateX(100px) rotate(45deg) frente contra rotate(45deg) translateX(100px). En el primero, el elemento se traslada cien píxeles y luego se gira en su lugar, de modo que se asienta cien píxeles a la derecha y se gira cuarenta y cinco grados. En el segundo, la rotación ocurre primero, lo que hace girar los ejes de coordenadas del elemento ', y luego el traductor lo mueve cien píxeles a lo largo del rotado Eje X, enviándolo diagonalmente hacia abajo y hacia la derecha. Mismas dos funciones, mismos dos valores, posiciones completamente diferentes.
El generador emite sus funciones en un orden deliberado, primero en perspectiva, luego traduce, luego gira, luego escala y luego sesga, lo cual es un valor predeterminado sensato que mantiene los casos comunes comportándose intuitivamente. Pero una vez que entiendes que ese orden es significativo, también entiendes por qué copiar una transformación de un lugar a otro a veces produce un resultado que no esperabas: movías la cadena pero no el modelo mental detrás de ella. Construirlo usted mismo y ver la contribución de cada función 's es la forma en que se construye ese modelo.
¿cómo hago que una transformación 3D parezca 3D?
Aquí está la trampa que me costó esa tarde. Las funciones rotateX y rotateY gire un elemento alrededor de los ejes horizontal y vertical, lo que debería inclinarlo hacia o alejándolo como si estuviera girando una página. Pero por defecto no hay profundidad en la escena, por lo que la rotación se proyecta directamente sobre el plano de la pantalla y el elemento simplemente parece comprimirse. A rotateY(60deg) sin perspectiva, parece que el elemento se hizo más estrecho, no como si hubiera girado.
El ingrediente que falta es perspective, y hay dos formas de suministrarlo. Puedes poner un perspective propiedad en el elemento principal, que establece un punto de fuga compartido para todos sus hijos 3D, o puede agregar un perspective() función al comienzo del elemento 's propio transform, lo que le da a ese elemento su propia profundidad. Este generador utiliza el segundo enfoque: establece el control deslizante de perspectiva y emite perspective() primero en la cadena, exactamente donde debe estar. Valores más pequeños, entre trescientos y seiscientos píxeles, colocan el punto de fuga cerca del elemento y hacen que la profundidad sea dramática; valores más grandes aplanan el efecto hacia una inclinación suave.
La tarjeta 3D preestablecida en la herramienta es la forma más rápida de ver esto. Establece una perspectiva de seiscientos píxeles y a rotateY de veinticinco grados, y el cuadro de vista previa se inclina de manera convincente hacia la pantalla. Vuelve el control deslizante de perspectiva a cero y observa cómo la misma rotación colapsa en una calabaza plana. Ese antes y después es toda la lección en dos arrastres.
¿qué hace el origen transformador?
Cada rotación y cada escala necesita un punto fijo para girar, y ese punto es el origen de la transformación. Por defecto se encuentra en el centro muerto del elemento, por lo que no está modificado rotate hace girar una caja alrededor de su centro y una sin modificar scale lo hace crecer hacia afuera en todas direcciones a la vez. Mueve el origen y ambos comportamientos cambian.
Establezca el origen en top left y una rotación se convierte en un swing, el elemento gira desde su esquina superior izquierda como un letrero articulado. Conéctalo a bottom y un scaleY hace crecer el elemento hacia arriba desde su base en lugar de expandirlo simétricamente, que es exactamente lo que desea para una barra que debería elevarse desde el eje de un gráfico. El generador ofrece las nueve posiciones de palabras clave, el centro, los cuatro bordes y las cuatro esquinas, y actualiza la vista previa en el instante en que elige una, por lo que la diferencia entre un giro y un swing está a un clic de distancia.
Esta es una de esas propiedades que es casi invisible hasta que la necesitas, y luego es lo único que produce el efecto que buscas. Un menú que debe desplegarse desde su borde superior, una información sobre herramientas que debe ampliarse a partir del elemento al que pertenece, una tarjeta que debe girar alrededor de una esquina en lugar de en el medio, todos ellos son de origen transformado, y ninguno de ellos es obvio por el transform valor solo.
¿por qué la transformación no empuja a otros elementos?
Una de las propiedades más útiles de transform también es lo que a la gente le sorprende más la primera vez que los muerde. Un elemento transformado no afecta el diseño que lo rodea. Cuando traduzcas un cuadro cuarenta píxeles a la derecha, representa cuarenta píxeles a la derecha, pero aún reserva su espacio original en el flujo de documentos, por lo que nada más se mueve para llenar el vacío y nada se deja de lado. La transformación es un efecto de tiempo de pintura, que se aplica después de que ya se ha calculado el diseño.
Esta es una característica, no un error, y es precisamente lo que hace que la transformación sea la herramienta correcta para la animación. Porque mover un elemento con transform no activa un reflujo, el navegador puede componer el cambio en la GPU y mantener la animación a sesenta fotogramas por segundo. Moviendo el mismo elemento con top investigaciones operacionales left investigaciones operacionales margin obliga al navegador a volver a calcular el diseño en cada cuadro, que es la causa más común de animación que tartamudea y suelta cuadros. Si quieres un movimiento suave, animas transform y opacity, y dejas las propiedades de diseño en paz. Cuando necesita que el contenido circundante vuelva a fluir, es una señal de que desea un cambio de diseño en lugar de una transformación, y una herramienta como generador flexbox o el Generador de red CSS es el lugar adecuado para empezar.
¿Por qué un niño fijo se rompió dentro de mi elemento transformado?
Este es el gotcha que parece un error en algo no relacionado y vale la pena saberlo antes de que le cueste una hora. La especificación dice que cualquier elemento con a transform valor distinto de none se convierte en un bloque contenedor para sus descendientes que se posicionan fixed investigaciones operacionales absolute, y también crea un nuevo contexto de apilamiento. Ambos tienen consecuencias que emergen lejos de la transformación misma.
El cambio de bloque contenedor es el que sorprende a la gente. A position: fixed se supone que el elemento debe anclarse a la ventana gráfica y permanecer colocado mientras la página se desplaza. Pero si algún antepasado de ese elemento fijo tiene una transformación, el elemento fijo se ancla ese antepasado en cambio, y de repente tu "fijo" el encabezado se desplaza con el contenido o su modal queda atrapado dentro de una tarjeta. Nada en la apariencia de transform's insinúa esto; el elemento se ve bien y algo tres niveles más abajo se posiciona mal. Cuando un elemento fijo o absoluto se comporta como si estuviera atrapado, lo primero que hay que comprobar es si un antepasado lleva una transformación. El cambio de contexto de apilamiento provoca una clase paralela de confusión, donde a z-index el que solía funcionar de repente no lo hace, porque el elemento transformado selló a sus hijos en su propia capa de apilamiento. Exactamente el mismo comportamiento se aplica al filter propiedad, por eso el Generador de filtros CSS lleva la misma advertencia.
¿Qué funciones cubre el generador y cuándo alcanza cada una?
La herramienta expone el conjunto completo de funciones de transformación comunes y ayuda a saber para qué sirve cada una en lugar de arrastrarlas al azar. Aquí está el mapa.
| Función | Lo que hace | Uso Típico |
|---|---|---|
translateX / translateY |
Mueve el elemento a lo largo de un eje | Entradas deslizables, empujones flotantes, posicionamiento desplazado |
rotate |
Gira el elemento alrededor de su centro (2D) | Insignias inclinadas, cargadores giratorios, divertidos ángulos flotantes |
scale (X e Y) |
Crece o encoge el elemento | Zoom flotante, efectos pop, retroalimentación de presión |
skewX / skewY |
Inclina el elemento a lo largo de un eje | Banners dinámicos, formas de estilo cursiva, señales de movimiento |
rotateX / rotateY |
Gira el elemento en el espacio 3D | Volteretas de cartas, paneles basculantes, efectos de flujo de cobertura |
perspective |
Agrega profundidad para que las rotaciones 3D se lean correctamente | Siempre emparejado con rotarX o rotarY |
Las dos que necesitan un compañero son las rotaciones 3D, que no convencen en nada sin perspectiva, y una escala negativa, que vale la pena destacar porque no es obvia. Configuración scaleX a un valor negativo, voltea el elemento horizontalmente, como un espejo, que es como funciona el ajuste preestablecido Flip Horizontal. Es un truco realmente útil, que refleja un ícono en lugar de exportar un segundo activo, y queda directamente fuera del control de escala una vez que sabes que se permiten valores negativos.
¿Cómo mantiene honesta la vista previa el generador?
El modo de falla de cualquier generador visual es la deriva entre lo que muestra la vista previa y lo que produce el código exportado. Una herramienta que representa su vista previa de una manera y escribe su CSS de otra es peor que ninguna herramienta, porque le enseña un valor que no se reproducirá. Este generador evita eso creando el estilo en línea de vista previa 's y la declaración copiada de la misma función, por lo que lo que ve es literalmente lo que pega. No existe una segunda ruta de código que pueda estar en desacuerdo.
Es también por eso que la salida contiene solo las funciones que cambiaste. Dejando scale en su identidad de uno, o rotate en cero, significa que esas funciones simplemente están ausentes en la cadena en lugar de escribirse como redundantes scale(1) ruido. Una transformación limpia es aquella que puedes leer de un vistazo y confiar, y emitir solo funciones significativas es la misma disciplina en la que confío en todas las herramientas visuales CSS, desde generador de gradiente al constructor de sombras de caja. Si está montando un kit más amplio, el Kit de herramientas para desarrolladores web recopila los que abro con más frecuencia y los hábitos detrás de usarlos bien están en el Herramientas de productividad para desarrolladores guía.
¿qué navegadores admiten transformaciones CSS?
Las transformaciones CSS son compatibles con todos los navegadores actuales y lo han sido durante más de una década. Las funciones 2D, traducir, rotar, escalar y sesgar, son universales y sin prefijo, y las funciones 3D junto con perspective son igualmente compatibles con Chrome, Firefox, Safari y Edge. El viejo -webkit- y -moz- los prefijos que alguna vez fueron necesarios son peso muerto en una hoja de estilo hoy en día, y la salida de este generador es CSS estándar sin prefijo que puede enviar tal como está escrito. Para las reglas autorizadas, las especificaciones del Módulo de Transformaciones CSS Nivel 1 y Nivel 2 del W3C son las fuentes principales, y vale la pena leerlas una vez que el generador le haya dado la intuición de seguirlas.
Si está creando un conjunto de herramientas visuales más amplio junto con esto, el generador de radio de borde y el generador de transición son compañeros naturales, ya que una transformación en el hover casi siempre quiere una transición para suavizarla. Aquí todo se ejecuta en el lado del cliente y el CSS que copia es suyo para usarlo sin tiempo de ejecución, sin paso de compilación ni dependencia.
Preguntas frecuentes
¿qué es un generador de transformada CSS?
Un generador de transformada CSS es una herramienta visual que crea un valor de transformada CSS a partir de la configuración que elija. Ajustas la perspectiva de traducción, rotación, escala, sesgo y 3D con controles deslizantes, y genera la declaración de transformación junto con una vista previa en vivo del resultado.
¿Importa el orden de las funciones de transformación?
Sí. Las funciones se aplican de derecha a izquierda en el sistema de coordenadas del elemento, por lo que traducir y luego rotar no es lo mismo que rotar y luego traducir. La traducción primero mueve el elemento y luego lo gira en su lugar; Al girar primero se giran los ejes, por lo que un traslado posterior lo envía en ángulo.
¿cómo hago que una transformación CSS parezca 3D?
Una rotación 3D necesita perspectiva para leerse como profundidad. Agregue una función de perspectiva () al inicio de la transformación, que este generador emite cuando configura el control deslizante de perspectiva o coloca una propiedad de perspectiva en el elemento principal. Los valores de entre 300 y 600 píxeles hacen que la profundidad sea más dramática.
¿qué hace el origen transformador?
el origen de transformación establece el punto en el que gira y escala una transformación. El valor predeterminado es el centro del elemento. Muévalo a una esquina y una rotación se convierte en un giro desde esa esquina; muévalo a un borde y la escala crece desde ese borde en lugar de hacia afuera en todas las direcciones.
¿Por qué la transformación no mueve otros elementos de la página?
Transformar es un efecto de tiempo de pintura. El elemento se representa en su nueva posición pero aún reserva su cuadro original en el diseño, por lo que nada a su alrededor cambia. Eso es lo que hace que la transformación sea ideal para la animación y por qué utiliza una propiedad de margen, posición o diseño cuando necesita contenido para reflujo.
¿Por qué un hijo fijo o absoluto se rompe dentro de un elemento transformado?
Cualquier elemento con una transformación distinta de ninguna se convierte en un bloque contenedor para sus descendientes fijos y absolutamente posicionados y crea un nuevo contexto de apilamiento. Una posición: el hijo fijo luego se ancla al padre transformado en lugar de a la ventana gráfica, y el orden del índice z puede cambiar. Mueva al niño fuera del elemento transformado si debe permanecer fijo en la pantalla.
¿debo animar la transformación en lugar de arriba, izquierda, ancho o alto?
Sí, para un movimiento suave. La transformación y la opacidad se componen en la GPU y no activan el diseño, por lo que se animan a 60 fps. Animar la parte superior, izquierda, ancho o alto obliga al navegador a recalcular el diseño en cada cuadro, que es la causa habitual de la animación janky.
¿la transformación generada CSS es gratuita y segura de usar?
Sí. La herramienta es completamente gratuita, sin límites de registro ni uso, y emite CSS estándar sin prefijo compatible con todos los navegadores modernos. Todo el procesamiento ocurre en su navegador, por lo que no se carga nada y la herramienta funciona sin conexión una vez cargada.
