Home  >  Article  >  Web Front-end  >  How to use rotate3d method in css3

How to use rotate3d method in css3

WBOY
WBOYOriginal
2022-06-08 16:03:524948browse

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)".

How to use rotate3d method in css3

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

How to use rotate3d method in css3

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

How to use rotate3d method in css3

(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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn