CSS Transforms Demo | Web Animations

Manipulate elements in 2D and 3D space without triggering layout recalculation. Hover to see 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