Generador de transformación CSS

Componer y copiar una transformación 2D

1. Edite la rotación inicial o agregue una función de transformación. Elija unidades para la traducción, habilite o deshabilite filas y duplíquelas o muévalas en orden escrito CSS.
2. Establezca el origen X e Y en píxeles o porcentajes. El cuadro de borde de muestra mide 120 por 60 píxeles CSS; Los valores porcentuales utilizan esas dimensiones originales antes de la transformación.
3. Inspeccione el CSS actual y la vista previa ilustrativa, luego use Copiar CSS. Los giros activos no válidos retienen CSS y el objetivo transformado. Borrar elimina las funciones; Restablecer restaura la rotación inicial y el origen centrado.

Orden, origen y dimensiones de referencia.

La lista está escrita en orden CSS. Para un punto, su función más a la derecha actúa primero. Por lo tanto, mover una rotación antes o después de una traslación puede cambiar el resultado incluso cuando ambos valores permanecen iguales.

La salida declara transform-box: border-box y el origen de transformación actual. La traducción porcentual y el origen utilizan el cuadro de borde no transformado del elemento, no su padre, el marco de vista previa o sus límites transformados.

Los valores de origen de los píxeles ya son distancias. Un origen horizontal del 50 % en la muestra se resuelve como 120 píxeles multiplicados por 50 divididos por 100, lo que da 60 píxeles; verticalmente, 60 por 50 dividido por 100 da 30 píxeles. Un tamaño de objetivo diferente cambia el porcentaje de geometría.

Una función de identidad explícita permanece en la salida. Puede retener efectos de apilamiento y bloques de contención relacionados con la transformación incluso cuando los puntos no se mueven. En su lugar, una lista vacía o totalmente deshabilitada no emite ninguno.

Ejemplos de composición

Con un origen superior izquierdo, translate(30px, -10px) rotate(90deg) asigna el punto de referencia (4, 5) a (25, -6). La rotación actúa sobre el punto anterior a la traducción escrita. Al invertir las filas se obtiene (5, 34).

En un cuadro de borde de 240 por 80 píxeles, translate(-25%, 150%) significa un desplazamiento de -60 y 120 píxeles. Los porcentajes todavía se resuelven desde el cuadro antes de una rotación circundante.

skew(45deg, -45deg) difiere de skewX(45deg) skewY(-45deg). La escala negativa puede reflejar la muestra, mientras que la escala cero u otra transformación singular puede hacerla desaparecer sin invalidar el CSS creado.

Límites de alcance y vista previa

Esta es una herramienta de creación 2D limitada. No tiene perspectiva, 3D, animación, importación arbitraria de CSS, carga de imágenes ni calculadora matricial completa. Los rangos numéricos y los tres decimales son límites de la herramienta y no toda la gramática CSS.

La vista previa puede escalar uniformemente su marco fijo a la tarjeta y recortar el contenido fuera de ese marco. No se ajusta a todos los límites transformados. La escala del marco, las guías y las dimensiones de muestra no se agregan al CSS copiado.

Transforma el cambio de pintura en lugar de reorganizar el diseño normal. Diferentes dimensiones del elemento, contenido y entorno CSS pueden cambiar el resultado. Las composiciones extremas o casi singulares también dependen de la representación nativa en punto flotante.

La salida conserva filas, unidades e identidades explícitas habilitadas, sin combinarlas ni convertirlas en una matriz calculada. La entrada activa no válida o el origen retiene el CSS actual y la copia en lugar de mostrar el último resultado válido como actual.

Estilo local sin historial guardado

La herramienta no agrega cargas, historial de estilos guardados, enlaces de entrada ni telemetría que contengan los valores creados. Los servicios y extensiones de sitios existentes están fuera de una promesa de privacidad universal. La copia es explícita; un nuevo documento comienza con los valores predeterminados.