Transform3D

Add Perepective to parent container. This creates a shared 3D space for all children.

perspective: 500px;
500px
500px
100px
100px
perspective: 100px;
1
2
3
4
5
6
1
2
3
4
5
6

RotateX()

transform: rotateX(360deg);

Card 1

RotateY()

transform: rotateY(360deg);

Card 2

RotateZ()

transform: rotateZ(360deg);

Card 3

Rotate3D()

transform: rotate3d(1, 1, 1, 360deg);

Card 4

TranslateZ()

transform: translateZ(200px);

Card 5

Top face

Left face

Right face

Bottom face