CSS3: 2d and 3d Transformations

Click or hold touch on on any of the following images to observe a 3D transformation.

For more examples of 2D and 3D transformations, see rotating image gallery or Morphing Cubes, or see Flux Slider or Web Designer Wall.

2D Translate

Translate

3D Translate

Translate3d

TranslateX

TranslateY

TranslateZ

2D Rotate

Rotate

3D Rotate

Rotate3d

RotateX

RotateY

RotateZ

2D Scale

Scale

3D Scale

Scale 3D

ScaleX

ScaleY

ScaleZ

2D Skew

Skew (-45deg X-axis)

Skew (30deg Y-axis)

Skew (-45deg X-axis, 30deg Y-axis)

3D Skew

N/A

2D Perspective

None. The perspective property only
affects 3D transformed elements.

3D Perspective

Perspective (150)

Perspective (500)

2D Matrix

Matrix:
rotate 30 degrees
translate 25, 50

3D Matrix

Matrix 3D
rotate 30 degrees
translate 25, 50

2d and 3d transforms

Demo