CSS 3D Transforms

The CSS transform property is also used to apply a 3D transformation to an element.

To activate a 3D space, the element needs perspective. The perspective defines the distance between the user's viewpoint and the element. Without perspective, any 3D transforms will look flat and two-dimensional.

You will learn more about Perspective in the next chapter.

Core 3D Transforms Functions

Within the transform property it is common to use the following 3D functions:

• rotateX()

• rotateY()

• rotateZ()

• translateZ()

The CSS rotateX() Function

The rotateX() function rotates an element around its x-axis at a given degree.

This means that it tilts an element forward or backward:

rotateX(45deg)

Example

.box {

   transform: rotateX(45deg);

}

The CSS rotateY() Function

The rotateY() function rotates an element around its y-axis at a given degree.

This means that it swivels an element left or right (like a swinging door):

rotateY(45deg)

Example

.box {

   transform: rotateY(45deg);

}

The CSS rotateZ() Function

The rotateZ() function rotates an element around its z-axis at a given degree.

This means that it spins the element flat on the screen (at a given degree):

rotateZ(45deg)

Example

.box {

   transform: rotateZ(45deg);

}

The CSS translateZ() Function

The translateZ() function repositions an element along the z-axis in 3D space.

This means that it moves the element closer to or farther away from the viewer.

A positive value moves the element closer to the viewer. A negative value moves the element farther away from the viewer:

translateZ(-100px)

Example

.box {

   transform:
  translateZ(-100px);

}

CSS Transform Properties

The following table lists all the 3D transform properties:

Core 3D Transform Functions