CSS rotate3d() Function – How to Rotate Elements in 3D
rotate3d() transforms an element by rotating it three-dimensionally around the x-, y-, and z-axis.
Syntax of the CSS rotate3d()
Function
rotate3d()
accepts four arguments. Here is the syntax:
Note the following:
- The
x
,y
, andz
arguments are numbers specifying the x-, y-, and z-coordinates. - The coordinates are the axis around which the element will rotate.
- The
angle
argument specifies the element’s angle of rotation. angle
can be in degree, gradian, radian, or turn.- An
angle
argument consists of a number followed by the unit you wish to use—for instance,45deg
.
Examples of the CSS rotate3d()
Function
Below are some examples of how the CSS rotate3d()
function works.
How to do a 70-degree rotation around the Z-axis
The snippet above used the rotate3d()
function to specify a seventy-degree (70⁰) rotation for the image around the Z-axis.
How to do a 70-degree rotation around the X-, Y-, and Z-axis
The snippet above used the rotate3d()
function to specify a seventy-degree (70⁰) rotation for the image around the x-, y-, and z-axis.
CSS rotate3d()
Function vs. rotate
Property: What’s the Difference?
CSS rotate3d()
functions and CSS rotate
property provide two similar ways to specify rotation transformations.
The main differences between the two rotation techniques are as follows:
- The CSS
rotate
property allows rotating an element without using the CSStransform
property. - The CSS
rotate
property’s syntax is shorter than its function alternative. - The CSS
rotate
property saves you from remembering the specific order to position the transform functions. - Browsers calculate the transform functions’ matrix in the order you assigned them to the CSS
transform
property—from left to right. - Browsers calculate the
transform
properties’ matrix in the following transformation matrix order:translate
rotate
scale
Here’s an example:
Use CSS rotate
property to do a 70-degree rotation around the X-, Y-, and Z-axis:
The snippet above used the rotate
property to specify a seventy-degree (70⁰) rotation for the image around the x-, y-, and z-axis.