From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../css/transform-function/rotate3d()/index.html | 131 +++++++++++++++++++++ 1 file changed, 131 insertions(+) create mode 100644 files/ru/web/css/transform-function/rotate3d()/index.html (limited to 'files/ru/web/css/transform-function/rotate3d()') diff --git a/files/ru/web/css/transform-function/rotate3d()/index.html b/files/ru/web/css/transform-function/rotate3d()/index.html new file mode 100644 index 0000000000..5558f3f69f --- /dev/null +++ b/files/ru/web/css/transform-function/rotate3d()/index.html @@ -0,0 +1,131 @@ +--- +title: rotate3d() +slug: Web/CSS/transform-function/rotate3d() +tags: + - CSS +translation_of: Web/CSS/transform-function/rotate3d() +--- +
{{CSSRef}}
+ +
Функция CSS rotate3d() трансформирует элемент без деформации, вращяя его в трехмерном пространстве вокруг зафиксированной оси. Её результатом является тип {{cssxref ("<transform-function>")}}.
+ +
 
+ +
{{EmbedInteractiveExample("pages/css/rotate3d.html")}}
+ + + +

In 3D space, rotations have three degrees of liberty, which together describe a single axis of rotation. The axis of rotation is defined by an [x, y, z] vector and pass by the origin (as defined by the {{ cssxref("transform-origin") }} property). If, as specified, the vector is not normalized (i.e., if the sum of the square of its three coordinates is not 1), the {{glossary("user agent")}} will normalize it internally. A non-normalizable vector, such as the null vector, [0, 0, 0], will cause the rotation to be ignored, but without invaliding the whole CSS property.

+ +
Note: Unlike rotations in the 2D plane, the composition of 3D rotations is usually not commutative. In other words, the order in which the rotations are applied impacts the result.
+ +

Syntax

+ +

The amount of rotation created by rotate3d() is specified by three {{cssxref("<number>")}}s and one {{cssxref("<angle>")}}. The <number>s represent the x-, y-, and z-coordinates of the vector denoting the axis of rotation. The <angle> represents the angle of rotation; if positive, the movement will be clockwise; if negative, it will be counter-clockwise.

+ +
rotate3d(x, y, z, a)
+
+ +

Values

+ +
+
x
+
Is a {{cssxref("<number>")}} describing the x-coordinate of the vector denoting the axis of rotation which could between 0 and 1.
+
y
+
Is a {{cssxref("<number>")}} describing the y-coordinate of the vector denoting the axis of rotation which could between 0 and 1.
+
z
+
Is a {{cssxref("<number>")}} describing the z-coordinate of the vector denoting the axis of rotation which could between 0 and 1.
+
a
+
Is an {{ cssxref("<angle>") }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.
+
+ + + + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2This transformation applies to the 3D space and can't be represented on the plane.
Homogeneous coordinates on ℝℙ2
Cartesian coordinates on ℝ3 1+(1-cos(a))(x2-1)z·sin(a)+xy(1-cos(a))-y·sin(a)+xz·(1-cos(a))-z·sin(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sin(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001
Homogeneous coordinates on ℝℙ3
+ +

Examples

+ +

Rotating on the y-axis

+ +

HTML

+ +
<div>Normal</div>
+<div class="rotated">Rotated</div>
+ +

CSS

+ +
body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(0, 1, 0, 60deg);
+  background-color: pink;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}}

+ +

Rotating on a custom axis

+ +

HTML

+ +
<div>Normal</div>
+<div class="rotated">Rotated</div>
+ +

CSS

+ +
body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(1, 2, -1, 192deg);
+  background-color: pink;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}}

+ +

Browser compatibility

+ +

Please see the <transform-function> data type for compatibility info.

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf