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 --- .../ru/web/css/transform-function/skew/index.html | 118 +++++++++++++++++++++ 1 file changed, 118 insertions(+) create mode 100644 files/ru/web/css/transform-function/skew/index.html (limited to 'files/ru/web/css/transform-function/skew/index.html') 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