Playground de transform en CSS

Compón transformaciones 2D y 3D, compara cómo cambia el resultado según el orden de las funciones y mueve el origen antes de copiar el código generado.

Presets

Elige una configuración como punto de partida y ajusta después cualquier control.

Composicióntransform acepta none o una lista de funciones separadas por espacios. El lab agrupa traslación, rotación, escala y sesgo para que puedas comparar su composición.

Dimensión

Orden de funciones

Cada función establece un nuevo sistema de coordenadas para la siguiente. Cambiar el orden puede producir una posición y una forma distintas aun usando los mismos valores.

Traslación

Rotación

EscalaLos valores negativos invierten el elemento sobre el eje correspondiente. Un valor de 0 hace que deje de ser visible en ese eje.

Sesgo

transform-origintransform-origin fija el punto alrededor del que se aplica la transformación. Puedes definir porcentajes personalizados o combinar las palabras clave horizontales left, center y right con top, center y bottom.

Formato del origen

Transforma el espacio

El contorno discontinuo conserva la referencia sin transformar.

HTML

<div class="transform-demo">
  CSS transform
</div>

Tailwind CSS

Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.

<div class="inline-[250px] block-[250px] grid place-items-center rounded-2xl bg-linear-to-br from-orange-500 to-blue-600 text-slate-50 [transform:translate(32px,_-18px)_rotate(-12deg)_scale(1.05,_1.05)_skew(0deg,_0deg)] [transform-origin:50%_50%]">
  CSS transform
</div>

CSS

.transform-demo {
  inline-size: 250px;
  block-size: 250px;
  background: linear-gradient(135deg, #f97316, #2563eb);
  display: grid;
  place-items: center;
  border-radius: 1rem;
  color: #f8fafc;
  transform: translate(32px, -18px) rotate(-12deg) scale(1.05, 1.05) skew(0deg, 0deg);
  transform-origin: 50% 50%;
}