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.

How to use the rotate3d method in css3

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 type, which can be a value between 0 and 1, indicating the X coordinate direction of the rotation axis Vector.

• y type, which can be a value between 0 and 1, representing the vector in the Y coordinate direction of the rotation axis.

• z type, which can be a value between 0 and 1, representing the vector in the Z coordinate direction of the rotation axis.

• a type, indicating the rotation angle. Positive angle values ​​represent clockwise rotation, and negative values ​​represent counterclockwise rotation.

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!