From 9bf6693b2edd5281c1577856895c55653a41dc01 Mon Sep 17 00:00:00 2001 From: MDN Date: Sat, 19 Mar 2022 00:13:08 +0000 Subject: [CRON] sync translated content --- .../css/transform-function/rotate3d()/index.html | 131 --------------------- 1 file changed, 131 deletions(-) delete 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 deleted file mode 100644 index cb26bcd71f..0000000000 --- a/files/ru/web/css/transform-function/rotate3d()/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -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