Demo de Transformaciones CSS

Manipulate elements in 2D and 3D space without triggering layout recalculation. Pasa el ratón para ver transforms in action.

1. Rotate

Spin element around its center.

Rotate

transform: rotate(180deg);

Enlarge or shrink element size.

Scale

transform: scale(1.3);

Move element along X and Y axes.

Move

						transform:

						  translateX(40px)

						  translateY(-20px);

Distort element along axes.

Skew

						transform:

						  skewX(20deg)

						  skewY(10deg);

Multiple transforms applied together.

Multi

						transform:

						  rotate(15deg)

						  scale(1.2)

						  translateY(-10px);

Rotate in 3D space.

						transform:

						  rotateX(45deg)

						  rotateY(45deg);

3D flip with backface visibility.

Front

Back

						transform-style: preserve-3d;

						backface-visibility: hidden;

						transform: rotateY(180deg);

Rotation from left edge instead of center.

Origin

						transform-origin: left center;

						transform: rotate(90deg);

GPU-accelerated: Transforms don't trigger layout recalculation, making them fast
Order matters: rotate(45deg) scale(2) ≠ scale(2) rotate(45deg)
Transform origin: Control the pivot point with transform-origin
3D transforms: Use perspective on parent for 3D effect
Best practice: Combine with transitions for smooth, performant animations