CSS - 3D Transforms

CSS transform are used to animate elements in three-dimensional space by using properties like translate, scale and rotate. In other words, these functions let you rotate, scale, and move elements along the X, Y, and Z axes, adding depth and perspective to your designs.

2D Transform3D Transform

Table of Contents

CSS 3D Translate()CSS 3D Rotate()CSS 3D Scale()CSS 3D Transform Related Properties

CSS 3D Translate()

CSStranslate3d()function moves an element in 3D space by specifying offsets along the X, Y, and Z axes, where the Z-axis controls depth (distance towards or away from the viewer). The following example shows a box that moves in 3D space when hovered over. Theperspectiveproperty is used to give a sense of depth for 3d effect.

Example

CSS 3D Rotate()

CSSrotate3d()function allows you to rotate an element around a specified axis in 3D space by defining the X, Y, and Z components of the rotation vector and the angle of rotation. Here is an example showing a box that rotates in 3D space when we hover over it, creating a dynamic visual effect.

Example

CSS 3D Scale()

CSSscale3d()function scales an element in 3D space by specifying scaling factors along the X, Y, and Z axes, allowing for uniform or non-uniform scaling. The following example shows a box that scales in 3D space when hovered over, creating a visually appealing zoom effect.

Example

CSS 3D Transform Related Properties

The following table lists all the various properties that are used to transform the elements in the three-dimensional space.

PropertyDescriptionExamplebackface-visibilityCSSbackface-visibilityproperty sets the visibility of back face of an element to the user.Try ItperspectiveCSSperspectiveproperty determines the distance between the z=0 plane and the user.Try Itperspective-originCSSperspective-originproperty determines the position at which the user is looking at the 3D-positioned element.Try Itrotate3d()CSSrotate3d()function rotates an element in the three-dimensional space.Try Itscale3d()CSS scale3d() function scales an element in the three-dimensional space.Try IttransformCSStransformproperty transforms an element in the three-dimensional space.Try Ittranslatecsstranslateproperty translates an element in three-dimensional space.Try ItrotateZ()CSSrotateZ()function rotates an element around the z-axis.Try ItscaleZ()CSSscaleZ()function scales an element up or down along the z-axis.Try IttranslateZ()CSStranslateZ()function translates an element up or down along the z-axis.Try It