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 --- .../web/css/transform-function/rotate()/index.html | 137 -------------------- .../web/css/transform-function/rotate/index.html | 138 +++++++++++++++++++++ .../css/transform-function/rotate3d()/index.html | 131 ------------------- .../web/css/transform-function/rotate3d/index.html | 132 ++++++++++++++++++++ .../css/transform-function/scale3d()/index.html | 99 --------------- .../web/css/transform-function/scale3d/index.html | 100 +++++++++++++++ .../web/css/transform-function/skew()/index.html | 117 ----------------- .../ru/web/css/transform-function/skew/index.html | 118 ++++++++++++++++++ 8 files changed, 488 insertions(+), 484 deletions(-) delete mode 100644 files/ru/web/css/transform-function/rotate()/index.html create mode 100644 files/ru/web/css/transform-function/rotate/index.html delete mode 100644 files/ru/web/css/transform-function/rotate3d()/index.html create mode 100644 files/ru/web/css/transform-function/rotate3d/index.html delete mode 100644 files/ru/web/css/transform-function/scale3d()/index.html create mode 100644 files/ru/web/css/transform-function/scale3d/index.html delete mode 100644 files/ru/web/css/transform-function/skew()/index.html create mode 100644 files/ru/web/css/transform-function/skew/index.html (limited to 'files/ru/web/css/transform-function') diff --git a/files/ru/web/css/transform-function/rotate()/index.html b/files/ru/web/css/transform-function/rotate()/index.html deleted file mode 100644 index eddac712aa..0000000000 --- a/files/ru/web/css/transform-function/rotate()/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: rotate() -slug: Web/CSS/transform-function/rotate() -tags: - - CSS - - CSS трансформация - - CSS функция - - Reference - - Rotate - - transform -translation_of: Web/CSS/transform-function/rotate() ---- -
{{CSSRef}}
- -

Функция CSS rotate () определяет преобразование, которое перемещает элемент вокруг неподвижной точки (как определено свойством {{Cssxref ("transform-origin")}}, не деформируя его. Количество движения определяется заданным углом; если положительно, движение будет по часовой стрелке, если оно отрицательное, оно будет против часовой стрелки. Вращение на 180 ° называется точечным отражением.

- -

- -

Синтаксис

- -
rotate(a)
-
- -

Значения

- -
-
a
-
Является {{ cssxref("<angle>") }}, представляющим угол поворота. Положительный угол обозначает вращение по часовой стрелке, а отрицательный - против часовой стрелки.
-
- - - - - - - - - - - - - - - - - - - - - -
Декартовы координаты на ℝ2Однородные координаты на ℝℙ2Декартовы координаты на ℝ3Однородные координаты на ℝℙ3
cos(a)-sin(a) sin(a)cos(a) cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001
[cos(a) sin(a) -sin(a) cos(a) 0 0]
- -

Примеры

- -

Базовый пример

- -

HTML

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

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
-  background-color: pink;
-}
- -

Result

- -

{{EmbedLiveSample("Базовый_пример", "auto", 180)}}

- -

Объединение вращения с другим преобразованием

- -

Если вы хотите применить к элементу несколько преобразований, будьте осторожны с порядком, в котором вы указываете свои преобразования. Например, если вы вращаете перед сдвигом, сдвиг произойдёт относительно новой оси вращения!

- -

HTML

- -
<div>Normal</div>
-<div class="rotate">Rotated</div>
-<div class="rotate-translate">Rotated + Translated</div>
-<div class="translate-rotate">Translated + Rotated</div>
-
- -

CSS

- -
div {
-  position: absolute;
-  left: 40px;
-  top: 40px;
-  width: 100px;
-  height: 100px;
-  background-color: lightgray;
-}
-
-.rotate {
-  background-color: transparent;
-  outline: 2px dashed;
-  transform: rotate(45deg);
-}
-
-.rotate-translate {
-  background-color: pink;
-  transform: rotate(45deg) translateX(180px);
-}
-
-.translate-rotate {
-  background-color: gold;
-  transform: translateX(180px) rotate(45deg);
-}
-
- -

Result

- -

{{EmbedLiveSample("Объединение_вращения_с_другим_преобразованием", "auto", 320)}}

- -

Спецификации

- -{{Specifications}} - -

Поддержка браузерами

- -

{{Compat}}

- -

Смотрите также

- - diff --git a/files/ru/web/css/transform-function/rotate/index.html b/files/ru/web/css/transform-function/rotate/index.html new file mode 100644 index 0000000000..57f781c4ff --- /dev/null +++ b/files/ru/web/css/transform-function/rotate/index.html @@ -0,0 +1,138 @@ +--- +title: rotate() +slug: Web/CSS/transform-function/rotate +tags: + - CSS + - CSS трансформация + - CSS функция + - Reference + - Rotate + - transform +translation_of: Web/CSS/transform-function/rotate() +original_slug: Web/CSS/transform-function/rotate() +--- +
{{CSSRef}}
+ +

Функция CSS rotate () определяет преобразование, которое перемещает элемент вокруг неподвижной точки (как определено свойством {{Cssxref ("transform-origin")}}, не деформируя его. Количество движения определяется заданным углом; если положительно, движение будет по часовой стрелке, если оно отрицательное, оно будет против часовой стрелки. Вращение на 180 ° называется точечным отражением.

+ +

+ +

Синтаксис

+ +
rotate(a)
+
+ +

Значения

+ +
+
a
+
Является {{ cssxref("<angle>") }}, представляющим угол поворота. Положительный угол обозначает вращение по часовой стрелке, а отрицательный - против часовой стрелки.
+
+ + + + + + + + + + + + + + + + + + + + + +
Декартовы координаты на ℝ2Однородные координаты на ℝℙ2Декартовы координаты на ℝ3Однородные координаты на ℝℙ3
cos(a)-sin(a) sin(a)cos(a) cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001
[cos(a) sin(a) -sin(a) cos(a) 0 0]
+ +

Примеры

+ +

Базовый пример

+ +

HTML

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

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
+  background-color: pink;
+}
+ +

Result

+ +

{{EmbedLiveSample("Базовый_пример", "auto", 180)}}

+ +

Объединение вращения с другим преобразованием

+ +

Если вы хотите применить к элементу несколько преобразований, будьте осторожны с порядком, в котором вы указываете свои преобразования. Например, если вы вращаете перед сдвигом, сдвиг произойдёт относительно новой оси вращения!

+ +

HTML

+ +
<div>Normal</div>
+<div class="rotate">Rotated</div>
+<div class="rotate-translate">Rotated + Translated</div>
+<div class="translate-rotate">Translated + Rotated</div>
+
+ +

CSS

+ +
div {
+  position: absolute;
+  left: 40px;
+  top: 40px;
+  width: 100px;
+  height: 100px;
+  background-color: lightgray;
+}
+
+.rotate {
+  background-color: transparent;
+  outline: 2px dashed;
+  transform: rotate(45deg);
+}
+
+.rotate-translate {
+  background-color: pink;
+  transform: rotate(45deg) translateX(180px);
+}
+
+.translate-rotate {
+  background-color: gold;
+  transform: translateX(180px) rotate(45deg);
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Объединение_вращения_с_другим_преобразованием", "auto", 320)}}

+ +

Спецификации

+ +{{Specifications}} + +

Поддержка браузерами

+ +

{{Compat}}

+ +

Смотрите также

+ + 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

- - 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..2e4a5ed91e --- /dev/null +++ b/files/ru/web/css/transform-function/rotate3d/index.html @@ -0,0 +1,132 @@ +--- +title: rotate3d() +slug: Web/CSS/transform-function/rotate3d +tags: + - CSS +translation_of: Web/CSS/transform-function/rotate3d() +original_slug: 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

+ + diff --git a/files/ru/web/css/transform-function/scale3d()/index.html b/files/ru/web/css/transform-function/scale3d()/index.html deleted file mode 100644 index e66adb526b..0000000000 --- a/files/ru/web/css/transform-function/scale3d()/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: scale3d() -slug: Web/CSS/transform-function/scale3d() -translation_of: Web/CSS/transform-function/scale3d() ---- -
{{CSSRef}}
- -

scale3d() CSS функция изменяет размер элемента. Благодаря величине масштабирования определённой вектором, может изменять различные размеры в разных масштабах.

- -

Это преобразование характеризуется вектором, координаты которого определяют, сколько масштабирования выполняется в каждом направлении. Если все три координаты вектора равны, масштабирование равномерно или изотропно, а форма элемента сохраняется. В этом случае функция масштабирования определяет гомотетическое преобразование.

- -

Когда вне диапазона [-1, 1], масштабирование увеличивает элемент в направлении координаты; Когда внутри диапазона он сжимает элемент в этом направлении. При равном 1 он ничего не делает, а когда отрицательный, он выполняет точечное отражение и модификацию размера.

- -

Синтаксис

- -
scale3d(sx, sy, sz)
-
- -

Значения

- -
-
sx
-
Является  {{cssxref("<number>")}} , представляющим абсцисс вектора масштабирования.
-
sy
-
Является  {{cssxref("<number>")}} , представляющим ординату вектора масштабирования.
-
sz
-
Является  {{cssxref("<number>")}}, представляющим z-компонент масштабирующего вектора.
-
- - - - - - - - - - - - - - - - - -
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
Это преобразование применяется к пространству 3D и не может быть представлено на плоскости. sx000sy000sz sx0000sy0000sz00001
- -

Примеры

- -

Without changing the origin

- -

HTML

- -
<p>foo</p>
-<p class="transformed">bar</p>
- -

CSS

- -
p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformed {
-  transform: perspective(500px) scale3d(0.8, 2, 0.2) translateZ(100px);
-  background-color: blue;
-}
-
- -

Result

- -

{{EmbedLiveSample("Without_changing_the_origin","100%","200")}}

- -

Translating the origin of the transformation

- -

HTML

- -
<p>foo</p>
-<p class="transformed">bar</p>
- -

CSS

- -
p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformed {
-  transform: scale3d(2, 3, 0);
-  transform-origin: center;
-  background-color: blue;
-}
-
- -

Result

- -

{{EmbedLiveSample("Translating_the_origin_of_the_transformation","100%","200")}}

diff --git a/files/ru/web/css/transform-function/scale3d/index.html b/files/ru/web/css/transform-function/scale3d/index.html new file mode 100644 index 0000000000..81db8c79b9 --- /dev/null +++ b/files/ru/web/css/transform-function/scale3d/index.html @@ -0,0 +1,100 @@ +--- +title: scale3d() +slug: Web/CSS/transform-function/scale3d +translation_of: Web/CSS/transform-function/scale3d() +original_slug: Web/CSS/transform-function/scale3d() +--- +
{{CSSRef}}
+ +

scale3d() CSS функция изменяет размер элемента. Благодаря величине масштабирования определённой вектором, может изменять различные размеры в разных масштабах.

+ +

Это преобразование характеризуется вектором, координаты которого определяют, сколько масштабирования выполняется в каждом направлении. Если все три координаты вектора равны, масштабирование равномерно или изотропно, а форма элемента сохраняется. В этом случае функция масштабирования определяет гомотетическое преобразование.

+ +

Когда вне диапазона [-1, 1], масштабирование увеличивает элемент в направлении координаты; Когда внутри диапазона он сжимает элемент в этом направлении. При равном 1 он ничего не делает, а когда отрицательный, он выполняет точечное отражение и модификацию размера.

+ +

Синтаксис

+ +
scale3d(sx, sy, sz)
+
+ +

Значения

+ +
+
sx
+
Является  {{cssxref("<number>")}} , представляющим абсцисс вектора масштабирования.
+
sy
+
Является  {{cssxref("<number>")}} , представляющим ординату вектора масштабирования.
+
sz
+
Является  {{cssxref("<number>")}}, представляющим z-компонент масштабирующего вектора.
+
+ + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
Это преобразование применяется к пространству 3D и не может быть представлено на плоскости. sx000sy000sz sx0000sy0000sz00001
+ +

Примеры

+ +

Without changing the origin

+ +

HTML

+ +
<p>foo</p>
+<p class="transformed">bar</p>
+ +

CSS

+ +
p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed {
+  transform: perspective(500px) scale3d(0.8, 2, 0.2) translateZ(100px);
+  background-color: blue;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Without_changing_the_origin","100%","200")}}

+ +

Translating the origin of the transformation

+ +

HTML

+ +
<p>foo</p>
+<p class="transformed">bar</p>
+ +

CSS

+ +
p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed {
+  transform: scale3d(2, 3, 0);
+  transform-origin: center;
+  background-color: blue;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Translating_the_origin_of_the_transformation","100%","200")}}

diff --git a/files/ru/web/css/transform-function/skew()/index.html b/files/ru/web/css/transform-function/skew()/index.html deleted file mode 100644 index a9f6da3ac3..0000000000 --- a/files/ru/web/css/transform-function/skew()/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: skew() -slug: Web/CSS/transform-function/skew() -translation_of: Web/CSS/transform-function/skew() ---- -
{{CSSRef}}
- -

CSS функция skew() трансформирует элемент, наклоняя его в 2D-пространстве.

- -
{{EmbedInteractiveExample("pages/css/function-skew.html")}}
- - - -

Данная трансформация является линейным преобразованием векторного пространства (трансвекция или shear mapping), которое деформирует каждую точку элемента на определённый угол по горизонтали или вертикали. Координаты каждой точки изменяются на величину, пропорциональную указанному углу и расстоянию до точки, относительно которой выполняется трансформация (origin); таким образом, чем больше расстояние до смещаемой точки элемента, тем больше она будет смещена по горизонтали или вертикали.

- -

Синтаксис

- -

Функция skew() задаётся одним или двумя значениями которые отображают наклон в каждом из направлений.

- -
skew(ax)
-
-skew(ax, ay)
-
- -

Значения

- -
-
ax
-
Указывается значение {{cssxref("<angle>")}}, которое является углом наклона вдоль оси X.
-
ay
-
Указывается значение {{cssxref("<angle>")}}, которое является углом наклона вдоль оси Y. Если данное значение не задано, то по умолчанию оно равно 0. В этом случае вертикального наклона не будет, а будет только горизонтальный.
-
- - - - - - - - - - - - - - - - - - - - - -
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
1tan(ax)tan(ay)1 1tan(ax)0tan(ay)10001 1tan(ax)0tan(ay)10001 1tan(ax)00tan(ay)10000100001
[1 tan(ay) tan(ax) 1 0 0]
- -

Примеры

- -

Используя только наклон по оси x

- -

HTML

- -
<div>Обычный</div>
-<div class="skewed">Наклонённый</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.skewed {
-  transform: skew(10deg); /* Equal to skewX(10deg) */
-  background-color: pink;
-}
-
- -

Result

- -

{{EmbedLiveSample("Используя_только_наклон_по_оси_x", 200, 200)}}

- -

Используя два угла

- -

HTML

- -
<div>Обычный</div>
-<div class="skewed">Наклонённый</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.skewed {
-  transform: skew(10deg, 10deg);
-  background-color: pink;
-}
-
- -

Результат

- -

{{EmbedLiveSample("Используя_два_угла", 200, 200)}}

- -

Поддержка браузеров

- -

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

- -

Смотрите также

- - diff --git a/files/ru/web/css/transform-function/skew/index.html b/files/ru/web/css/transform-function/skew/index.html new file mode 100644 index 0000000000..613fd6e8a8 --- /dev/null +++ b/files/ru/web/css/transform-function/skew/index.html @@ -0,0 +1,118 @@ +--- +title: skew() +slug: Web/CSS/transform-function/skew +translation_of: Web/CSS/transform-function/skew() +original_slug: Web/CSS/transform-function/skew() +--- +
{{CSSRef}}
+ +

CSS функция skew() трансформирует элемент, наклоняя его в 2D-пространстве.

+ +
{{EmbedInteractiveExample("pages/css/function-skew.html")}}
+ + + +

Данная трансформация является линейным преобразованием векторного пространства (трансвекция или shear mapping), которое деформирует каждую точку элемента на определённый угол по горизонтали или вертикали. Координаты каждой точки изменяются на величину, пропорциональную указанному углу и расстоянию до точки, относительно которой выполняется трансформация (origin); таким образом, чем больше расстояние до смещаемой точки элемента, тем больше она будет смещена по горизонтали или вертикали.

+ +

Синтаксис

+ +

Функция skew() задаётся одним или двумя значениями которые отображают наклон в каждом из направлений.

+ +
skew(ax)
+
+skew(ax, ay)
+
+ +

Значения

+ +
+
ax
+
Указывается значение {{cssxref("<angle>")}}, которое является углом наклона вдоль оси X.
+
ay
+
Указывается значение {{cssxref("<angle>")}}, которое является углом наклона вдоль оси Y. Если данное значение не задано, то по умолчанию оно равно 0. В этом случае вертикального наклона не будет, а будет только горизонтальный.
+
+ + + + + + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
1tan(ax)tan(ay)1 1tan(ax)0tan(ay)10001 1tan(ax)0tan(ay)10001 1tan(ax)00tan(ay)10000100001
[1 tan(ay) tan(ax) 1 0 0]
+ +

Примеры

+ +

Используя только наклон по оси x

+ +

HTML

+ +
<div>Обычный</div>
+<div class="skewed">Наклонённый</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.skewed {
+  transform: skew(10deg); /* Equal to skewX(10deg) */
+  background-color: pink;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Используя_только_наклон_по_оси_x", 200, 200)}}

+ +

Используя два угла

+ +

HTML

+ +
<div>Обычный</div>
+<div class="skewed">Наклонённый</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.skewed {
+  transform: skew(10deg, 10deg);
+  background-color: pink;
+}
+
+ +

Результат

+ +

{{EmbedLiveSample("Используя_два_угла", 200, 200)}}

+ +

Поддержка браузеров

+ +

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

+ +

Смотрите также

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