CSS 2D & 3D Transform Playground

Live examples of your theory for transform, transition, and animation.

← Back to Main

1. 2D Transformations

translate(50px, 10px)
rotate(25deg)
scale(1.2, 0.8)
skew(12deg, 6deg)
matrix(1, 0.2, -0.2, 1, 10, 10)

matrix(a, b, c, d, e, f) combines translate, scale, skew, and rotate.

2. 3D Transformations + Perspective

rotateX(25deg)
rotateY(25deg)
rotateZ(18deg)
front
back
right
left
top
bottom
translate3d(20px, -8px, 20px)
matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 20, 20, 0, 1)

Use perspective on a parent to reveal depth.

3. CSS Transitions

transition: transform 0.3s ease, background 0.25s ease;

Hover me

4. CSS Animations + 5. Keyframes

animation: spin 2s ease-in-out infinite;

Spin