rotate3d function
The rotate3d function sets a rotation
of an element by a given angle simultaneously
relative to the X-, Y-, Z-axis in three-dimensional
space. It is used together with the
transform
property. The property value is an angle in any
angle units.
The function takes 4 parameters as values,
written separated by commas. The first three
parameters define the vector of the axis in
three-dimensional space, relative to which
the rotation will be performed. The fourth
parameter specifies the rotation angle.
Syntax
selector {
transform: rotate3d(X, Y, Z, angle);
}
Example
In this example, the axis vector will point to the upper right corner of the screen:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotate3d(1, 1, 0, 180deg);
}
: