CSS 3D Transforms

30% OFF - 9th Anniversary discount on Entity Framework Extensions until December 15 with code: ZZZANNIVERSARY9


Coordinate system

3D transforms are made according to an (x, y, z) coordinate vector system in Euclidean space.

The following image shows an example of coordinates in Euclidean space:

Euclidean space


  • The x axis represents the horizontal (left and right)
  • The y axis represents the vertical (up and down)
  • The z axis represents the depth (forward and backward/closer and further)

The following image shows how these coordinates are translated in CSS:

CSS 3D coordinate system

Got any CSS Question?