What separates 3D transforms from 2D transforms is perspective creating the illusion of depth and space on a two-dimensional screen by translating points along or around a Z-axis.

Use CSS transform properties to give web pages a rich visual appearance without needing image files. Elements can be positioned, rotated, and scaled in 2D and 3D space; perspective can also be applied, giving elements the appearance of depth.

Two-dimensional transforms work on the x and y axes, known as horizontal and vertical axes. Three-dimensional transforms work on the X-axis and Y-axis, as well as the z axis. These three-dimensional transforms help define not only the length and width of an element, but also the depth.

 

›› go to examples ››