Home > Article > Web Front-end > How to use rotate3d method in css3
In CSS3, the rotate3d() method is used to define the 3D transformation of an element. It moves the element around a fixed axis without deforming it. The amount of movement is defined by the specified angle; if the parameter is set to a positive number, the element will Move clockwise. If the parameter is set to a negative number, the element will move counterclockwise. The syntax is "transform:rotate3d(x,y,z,angle)".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
rotate3d() CSS function defines a transformation that moves the element around a fixed axis without deforming it. The amount of motion is defined by the specified angle; if positive, the motion will be clockwise, if negative, it will be counterclockwise.
In 3D space, rotation has 3 free dimensions, describing the axis of rotation. The axis of rotation is defined by a set of [x, y, z] vectors and is passed through the transform origin point (i.e. defined via the transform-origin CSS property). If these vectors are assigned non-standard values, i.e. when the sum of the squares of the 3 coordinate values is not equal to 1, it will be implicitly normalized internally. Non-standard vectors, such as null and [0, 0, 0], will cause rotation to have no effect, but will not affect other effects of the entire CSS property (Translator's Note: such as multiple transformations in transform).
In contrast to planar rotations, combinations of 3D rotations are generally not commutative; this means that the order of values defining the rotation rules is strictly controlled.
Syntax
rotate3d(x, y, z, a)
Value
x
y
z
a
The example is as follows:
Rotate around the Y axis
HTML
<div>Normal</div> <div class="rotated">Rotated</div> Copy to Clipboard
CSS
body { perspective: 800px; } div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotate3d(0, 1, 0, 60deg); background-color: pink; } Copy to Clipboard
Effect
Rotate around custom axis
HTML
<div>Normal</div> <div class="rotated">Rotated</div> Copy to Clipboard
CSS
body { perspective: 800px; } div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotate3d(1, 2, -1, 192deg); background-color: pink; } Copy to Clipboard
Effect
(Learning video sharing: css video tutorial)
The above is the detailed content of How to use rotate3d method in css3. For more information, please follow other related articles on the PHP Chinese website!