Generador de transformadas CSS

El generador de transformadas CSS es un editor visual de la propiedad de transformación CSS. Mueve un control deslizante para cada función de transformación (traducir, rotar, escalar, sesgar y las funciones 3D rotarX, rotarY y perspectiva) y observa cómo el efecto se aplica a un elemento de vista previa en tiempo real, luego copia el CSS exacto que produce. También le permite configurar el origen de la transformación, el punto de anclaje alrededor del cual gira cada rotación y escala.

La propiedad de transformación reposiciona y remodela un elemento sin alterar el diseño que lo rodea. Un elemento traducido, rotado o escalado todavía ocupa su caja original en el flujo, por lo que los elementos vecinos no se mueven, que es lo que hace que la transformación sea la herramienta correcta para efectos de desplazamiento, animaciones de entrada y cualquier movimiento que no deba desencadenar un reflujo. Se pueden enumerar varias funciones en una declaración y se aplican de derecha a izquierda en el espacio de coordenadas del elemento, por lo que el orden cambia genuinamente el resultado: traducir, luego rotar, mueve el elemento y luego lo hace girar en su lugar, mientras que rotar y luego traducir, gira los ejes primero y envía el elemento. en ángulo.

Todo sucede en tu navegador. Comience desde un ajuste preestablecido como Crecer, Girar, Voltear o Tarjeta 3D, ajuste cada función y copie la declaración. La herramienta escribe solo las funciones que realmente cambió, por lo que nunca envía una escala redundante (1) ni rota (0 grados). Sin cuenta, sin cargas y sigue funcionando sin conexión una vez que se ha cargado la página.

Dos detalles ahorran tiempo real de depuración. Primero, las rotaciones 3D solo parecen tridimensionales cuando hay una perspectiva presente; ya sea una función de perspectiva () primero en la misma transformación, como la emite esta herramienta, o una propiedad de perspectiva en el padre; de lo contrario, rotarY simplemente aplasta el elemento. En segundo lugar, 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, exactamente como la propiedad del filtro. Una posición: el hijo fijo dentro de un padre transformado se ancla a ese padre en lugar de a la ventana gráfica, y el orden del índice z que funcionó antes puede cambiar. Cuando una transformación rompe un diseño de una manera que no tiene nada que ver con su apariencia, ese comportamiento del bloque contenedor es casi siempre la razón.