CSS Transformations

Hover over elements to see transformations

2D Transformations

Space Image

Translate & Rotate

transform: translate(50px, 20px) rotate(15deg)

Nature Image

Scale & Skew

transform: scale(1.2) skew(10deg, 5deg)

Technology Image

Mega Transform

transform: translate(-20px, -10px) rotate(-5deg) scale(1.1)

3D Transformations

Architecture Image

Rotate X Axis

transform: rotateX(45deg) translateZ(20px)

Art Image

Rotate Y Axis

transform: rotateY(45deg) translateZ(30px)

Gaming Image

Full 3D Transform

transform: rotateX(20deg) rotateY(30deg) rotateZ(15deg) translateZ(40px)