initial commit

5 files changed, 708 insertions, 0 deletions

diff --git a/files/ru/web/css/transform-function/index.html b/files/ru/web/css/transform-function/index.html
new file mode 100644
index 0000000000..ac2d219b1f
--- /dev/null
+++ b/files/ru/web/css/transform-function/index.html
@@ -0,0 +1,207 @@
+---
+title: <transform-function>
+slug: Web/CSS/transform-function
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS Transforms
+  - Layout
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/transform-function
+---
+<div>{{CSSRef}}</div>
+
+<p>The <strong><code>&lt;transform-function&gt;</code></strong> CSS data type denotes a function used to modify an element's appearance. A transform can usually be expressed by matrices, with the result determined by using matrix multiplication on each point.</p>
+
+<h2 id="Coordinates_for_2D_graphics">Coordinates for 2D graphics</h2>
+
+<p>Various coordinate models can be used to describe any transformation. The most common are the Cartesian coordinate system and homogeneous coordinates.</p>
+
+<h3 id="Cartesian_coordinates">Cartesian coordinates</h3>
+
+<p><a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="/files/3438/coord_in_R2.png" style="float: right; width: 171px;"></a></p>
+
+<p>In the <a class="external" href="https://en.wikipedia.org/wiki/Cartesian_coordinate_system">Cartesian coordinate system</a> each point of <a class="external" href="https://en.wikipedia.org/wiki/Euclidean_geometry">Euclidian space</a> is described using two values: the <em>abscissa</em> and the <em>ordinate</em>. In CSS (and most computer graphics), the origin <code>(0, 0)</code> is the top-left corner of any element. Each point is mathematically described using the vector notation <code>(x, y)</code>.</p>
+
+<p>Each linear function is described using a 2x2 matrix like:</p>
+
+<div style="text-align: center;">
+<p><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></p>
+</div>
+
+<p>By using matrix multiplication with the linear function and each point in question, a transformation is created:</p>
+
+<div style="text-align: center;"><a href="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png"><img src="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png?size=webview" style="height: 32px; width: 189px;"></a>.</div>
+
+<p>Note that it is possible to apply several transformations in a row:</p>
+
+<div style="text-align: center;"><a href="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png"><img src="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png?size=webview" style="height: 32px; width: 313px;"></a>.</div>
+
+<div style="text-align: center;"> </div>
+
+<p>With this notation, it is possible to describe, and therefore composite, most common transformations: rotations, scaling, or skewing. In fact, all transformations that are linear functions can be described. Composite transforms are effectively applied in order from right to left. However, one major transformation is not linear and therefore must be special-cased when using this notation: translation. The translation vector <code>(tx, ty)</code> must be expressed separately, as two additional parameters.</p>
+
+<p><a class="external" href="https://en.wikipedia.org/wiki/August_Ferdinand_M%C3%B6bius">Möbius</a>' <a class="external" href="https://en.wikipedia.org/wiki/Homogeneous_coordinates">homogeneous coordinates</a> in <a class="external" href="https://en.wikipedia.org/wiki/Projective_geometry">projective geometry</a> leading to 3x3 transformation matrices, though more complex and unusual for non-specialists, doesn't suffer from the translation limitation as these can be expressed as linear functions in this algebra, removing the need for special cases.</p>
+
+<h2 id="Functions_defining_transformations">Functions defining transformations</h2>
+
+<p>Several functions are available to describe transformations in CSS. Each one applies a geometric operation, in 2D or 3D:</p>
+
+<dl>
+ <dt>{{cssxref("transform-function/matrix","matrix()")}}</dt>
+ <dd>The <code>matrix()</code> CSS function specifies a homogeneous 2D transformation matrix comprised of the specified six values. The constant values of such matrices are implied and not passed as parameters; the other parameters are described in the column-major order.</dd>
+ <dd><code>matrix(a, b, c, d, tx, ty)</code> is a shorthand for <code>matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code>.</dd>
+ <dt>{{cssxref("transform-function/matrix3d","matrix3d()")}}</dt>
+ <dd>The <code>matrix3d()</code> CSS function describes a 3D transform as a 4x4 homogeneous matrix. The 16 parameters are described in the column-major order.</dd>
+ <dt>{{cssxref("transform-function/perspective","perspective()")}}</dt>
+ <dd>The <code>perspective()</code> CSS function defines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z&gt;0 becomes larger; each 3D-element with z&lt;0 becomes smaller. The strength of the effect is determined by the value of this property.</dd>
+ <dt>{{cssxref("transform-function/rotate","rotate()")}}</dt>
+ <dd>The <code>rotate()</code> CSS function defines a transformation that moves the element around a fixed point (as specified by the {{ Cssxref("transform-origin") }} property) without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. A rotation by 180° is called <em>point reflection</em>.</dd>
+ <dt>{{cssxref("transform-function/rotate3d","rotate3d()")}}</dt>
+ <dd>The <code>rotate3d()</code> CSS function defines a transformation that moves the element around a fixed axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.In opposition to rotations in the plane, the composition of 3D rotations is usually not commutative; it means that the order in which the rotations are applied is crucial.</dd>
+ <dt>{{cssxref("transform-function/rotateX","rotateX()")}}</dt>
+ <dd>The <code>rotateX()</code> CSS function defines a transformation that moves the element around the abscissa without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.</dd>
+ <dd><code>rotateX(a)</code>is a shorthand for <code>rotate3D(1, 0, 0, a)</code>.</dd>
+ <dt>{{cssxref("transform-function/rotateY","rotateY()")}}</dt>
+ <dd>The <code>rotateY()</code> CSS function defines a transformation that moves the element around the ordinate without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.</dd>
+ <dd><code>rotateY(a)</code>is a shorthand for <code>rotate3D(0, 1, 0, a)</code>.</dd>
+ <dt>{{cssxref("transform-function/rotateZ","rotateZ()")}}</dt>
+ <dd>The <code>rotateZ()</code> CSS function defines a transformation that moves the element around the z-axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.</dd>
+ <dd><code>rotateZ(a)</code>is a shorthand for <code>rotate3D(0, 0, 1, a)</code>.</dd>
+ <dt>{{cssxref("transform-function/scale","scale()")}}</dt>
+ <dd>The <code>scale()</code> CSS function modifies the size of the element. It can either augment or decrease its size and as the amount of scaling is defined by a vector, it can do so more in one direction than in another one. This transformation is characterized by a vector whose coordinates define how much scaling is done in each direction. If both coordinates of the vector are equal, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines a homothetic transformation.</dd>
+ <dt>{{cssxref("transform-function/scale3d","scale3d()")}}</dt>
+ <dd>The <code>scale3d()</code> CSS function modifies the size of an element. Because the amount of scaling is defined by a vector, it can resize different dimensions at different scales. This transformation is characterized by a vector whose coordinates define how much scaling is done in each direction. If all three coordinates of the vector are equal, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines a homothetic transformation.</dd>
+ <dt>{{cssxref("transform-function/scaleX","scaleX()")}}</dt>
+ <dd>The <code>scaleX()</code> CSS function modifies the abscissa of each element point by a constant factor, except if this scale factor is <code>1</code>, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved. <code>scaleX(-1)</code> defines an <a class="external" href="https://en.wikipedia.org/wiki/Axial_symmetry">axial symmetry</a> with a vertical axis passing by the origin (as specified by the {{cssxref("transform-origin")}} property).</dd>
+ <dd><code>scaleX(sx)</code> is a shorthand for <code>scale(sx, 1)</code> or for <code>scale3d(sx, 1, 1)</code>.</dd>
+ <dt>{{cssxref("transform-function/scaleY","scaleY()")}}</dt>
+ <dd>The <code>scaleY()</code> CSS function modifies the ordinate of each element point by a constant factor except if this scale factor is <code>1</code>, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved. <code>scaleY(-1)</code> defines an <a class="external" href="https://en.wikipedia.org/wiki/Axial_symmetry">axial symmetry</a> with a horizontal axis passing by the origin (as specified by the {{cssxref("transform-origin")}} property).</dd>
+ <dd><code>scaleY(sy)</code> is a shorthand for <code>scale(1, sy)</code> or for <code>scale3d(1, sy, 1)</code>.</dd>
+ <dt>{{cssxref("transform-function/scaleZ","scaleZ()")}}</dt>
+ <dd>The <code>scaleZ()</code> CSS function modifies the z-coordinate of each element point by a constant factor, except if this scale factor is <code>1</code>, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved. <code>scaleZ(-1)</code> defines an <a class="external" href="https://en.wikipedia.org/wiki/Axial_symmetry">axial symmetry</a> along the z-axis passing by the origin (as specified by the {{cssxref("transform-origin")}} property).</dd>
+ <dd><code>scaleZ(sz)</code> is a shorthand for <code>scale3d(1, 1, sz)</code>.</dd>
+ <dt>{{cssxref("transform-function/skew","skew()")}}</dt>
+ <dd>The <code>skew()</code> CSS function is a shear mapping, or transvection, distorting each point of an element by a certain angle in each direction. It is done by increasing each coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.</dd>
+ <dt>{{cssxref("transform-function/skewX","skewX()")}}</dt>
+ <dd>The <code>skewX()</code> CSS function is a horizontal shear mapping distorting each point of an element by a certain angle in the horizontal direction. It is done by increasing the abscissa coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.</dd>
+ <dt>{{cssxref("transform-function/skewY","skewY()")}}</dt>
+ <dd>The <code>skewY()</code> CSS function is a vertical shear mapping distorting each point of an element by a certain angle in the vertical direction. It is done by increasing the ordinate coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.</dd>
+ <dt>{{cssxref("transform-function/translate","translate()")}}</dt>
+ <dd>The <code>translate()</code> CSS function moves the position of the element on the plane. This transformation is characterized by a vector whose coordinates define how much it moves in each direction.</dd>
+ <dt>{{cssxref("transform-function/translate3d","translate3d()")}}</dt>
+ <dd>The <code>translate3d()</code> CSS function moves the position of the element in the 3D space. This transformation is characterized by a 3-dimension vector whose coordinates define how much it moves in each direction.</dd>
+ <dt>{{cssxref("transform-function/translateX","translateX()")}}</dt>
+ <dd>The <code>translateX()</code> CSS function moves the element horizontally on the plane. This transformation is characterized by a {{cssxref("&lt;length&gt;")}} defining how much it moves horizontally.</dd>
+ <dd><code>translateX(tx)</code> is a shorthand for <code>translate(tx, 0)</code>.</dd>
+ <dt>{{cssxref("transform-function/translateY","translateY()")}}</dt>
+ <dd>The <code>translateY()</code> CSS function moves the element vertically on the plane. This transformation is characterized by a {{cssxref("&lt;length&gt;")}} defining how much it moves vertically.</dd>
+ <dd><code>translateY(ty)</code> is a shorthand for <code>translate(0, ty)</code>.</dd>
+ <dt>{{cssxref("transform-function/translateZ","translateZ()")}}</dt>
+ <dd>The <code>translateZ()</code> CSS function moves the element along the z-axis of the 3D space. This transformation is characterized by a {{cssxref("&lt;length&gt;")}} defining how much it moves.</dd>
+ <dd><code>translateZ(tz)</code> is a shorthand for <code>translate3d(0, 0, tz)</code>.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[1]</sup></td>
+   <td>9.0<sup>[2]</sup></td>
+   <td>10.5</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td>3D Support</td>
+   <td>12.0</td>
+   <td>{{CompatGeckoDesktop("10.0")}}</td>
+   <td>10.0</td>
+   <td>15.0</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatAndroid(2.1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>11.5</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td>3D Support</td>
+   <td>{{CompatAndroid(3.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>22</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko 14.0 removed the experimental support for <code>skew()</code>, but it was reintroduced in Gecko 15.0 for compatibility reasons. As it is non-standard and will likely be removed in the future, do not use it.</p>
+
+<p>Before Firefox 16, the translation values of <code>matrix()</code> and <code>matrix3d()</code> could be {{cssxref("length")}} in addition to the standard {{cssxref("number")}}.</p>
+
+<p>[2] Internet Explorer 5.5 or later supports a proprietary <a href="http://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx">Matrix Filter</a> which can be used to achieve a similar effect.</p>
+
+<p>Internet Explorer 9.0 or earlier has no support for 3D transforms. Mixing 3D and 2D transform functions, such as <code>-ms-transform: rotate(10deg) translateZ(0);</code>, will prevent the entire property from being applied.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>CSS {{cssxref("transform")}} property</li>
+</ul>
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..71d94f55e7
--- /dev/null
+++ b/files/ru/web/css/transform-function/rotate()/index.html
@@ -0,0 +1,154 @@
+---
+title: rotate()
+slug: Web/CSS/transform-function/rotate()
+tags:
+  - CSS
+  - CSS трансформация
+  - CSS функция
+  - Reference
+  - Rotate
+  - transform
+translation_of: Web/CSS/transform-function/rotate()
+---
+<div>{{CSSRef}}</div>
+
+<p>Функция CSS rotate () определяет преобразование, которое перемещает элемент вокруг неподвижной точки (как определено свойством {{Cssxref ("transform-origin")}}, не деформируя его. Количество движения определяется заданным углом; если положительно, движение будет по часовой стрелке, если оно отрицательное, оно будет против часовой стрелки. Вращение на 180 ° называется <em>точечным отражением</em>.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/12113/rotate.png" style="height: 175px; width: 258px;"></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">rotate(<em>a</em>)
+</pre>
+
+<h2 id="Значения">Значения</h2>
+
+<dl>
+ <dt><em>a</em></dt>
+ <dd>Является {{ cssxref("&lt;angle&gt;") }}, представляющим угол поворота. Положительный угол обозначает вращение по часовой стрелке, а отрицательный - против часовой стрелки.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Декартовы координаты на ℝ<sup>2</sup></th>
+   <th scope="col">Однородные координаты на ℝℙ<sup>2</sup></th>
+   <th scope="col">Декартовы координаты наℝ<sup>3</sup></th>
+   <th scope="col">Однородные координаты наℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr> <mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable></mfenced></math></td>
+   <td><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[cos(a) sin(a) -sin(a) cos(a) 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Базовый_пример">Базовый пример</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="rotated"&gt;Rotated&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
+  background-color: pink;
+}</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Базовый_пример", "auto", 180)}}</p>
+
+<h3 id="Объединение_вращения_с_другим_преобразованием">Объединение вращения с другим преобразованием</h3>
+
+<p>Если вы хотите применить к элементу несколько преобразований, будьте осторожны с порядком, в котором вы указываете свои преобразования. Например, если вы вращаете перед сдвигом, сдвиг произойдёт относительно новой оси вращения!</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="rotate"&gt;Rotated&lt;/div&gt;
+&lt;div class="rotate-translate"&gt;Rotated + Translated&lt;/div&gt;
+&lt;div class="translate-rotate"&gt;Translated + Rotated&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">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);
+}
+</pre>
+
+<h4 id="Result_2">Result</h4>
+
+<p>{{EmbedLiveSample("Объединение_вращения_с_другим_преобразованием", "auto", 320)}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-rotate", "rotate()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("css.properties.rotate")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-function")}}</li>
+ <li>{{cssxref("transform-function/rotate3d", "rotate3d()")}}</li>
+</ul>
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()
+---
+<div>{{CSSRef}}</div>
+
+<div>Функция <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>rotate3d()</code> </strong>трансформирует элемент без деформации, вращяя его в трехмерном пространстве вокруг зафиксированной оси. Её результатом является тип {{cssxref ("&lt;transform-function&gt;")}}.</div>
+
+<div> </div>
+
+<div>{{EmbedInteractiveExample("pages/css/rotate3d.html")}}</div>
+
+
+
+<p>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 <em>normalized</em> (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.</p>
+
+<div class="note"><strong>Note:</strong> 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.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>The amount of rotation created by <code>rotate3d()</code> is specified by three {{cssxref("&lt;number&gt;")}}s and one {{cssxref("&lt;angle&gt;")}}. The <code>&lt;number&gt;</code>s represent the x-, y-, and z-coordinates of the vector denoting the axis of rotation. The <code>&lt;angle&gt;</code> represents the angle of rotation; if positive, the movement will be clockwise; if negative, it will be counter-clockwise.</p>
+
+<pre class="syntaxbox notranslate">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>)
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} describing the x-coordinate of the vector denoting the axis of rotation which could between 0 and 1.</dd>
+ <dt><code>y</code></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} describing the y-coordinate of the vector denoting the axis of rotation which could between 0 and 1.</dd>
+ <dt><code>z</code></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} describing the z-coordinate of the vector denoting the axis of rotation which could between 0 and 1.</dd>
+ <dt><code>a</code></dt>
+ <dd>Is an {{ cssxref("&lt;angle&gt;") }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.</dd>
+</dl>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <td rowspan="2">This transformation applies to the 3D space and can't be represented on the plane.</td>
+  </tr>
+  <tr>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+  </tr>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <td colspan="1"><a href="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png"><img src="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png?size=webview" style="height: 47px; width: 510px;"></a><math> <mfenced><mtable><mtr><mtd>1<mo>+</mo>(1<mo>-</mo>cos(<mi>a</mi>))(<msup><mi>x</mi><mn>2</mn></msup><mo>-</mo>1)</mtd><mtd><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)+<mi>x</mi><mi>y</mi>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd><mo>-</mo><mi>y</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd></mtr><mtr><mtd><mo>-</mo><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>y</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd>1+(1-cos(a))(y2-1)</mtd><mtd><mi>x</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>y</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtr><mtd>ysin(a) + xz(1-cos(a))</mtd><mtd>-xsin(a)+yz(1-cos(a))</mtd><mtd>1+(1-cos(a))(z2-1)</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr> </mtr></mtable></mfenced></math></td>
+  </tr>
+  <tr>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+   <td colspan="1"><a href="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png"><img src="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png?size=webview" style="height: 61px; width: 522px;"></a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Rotating_on_the_y-axis">Rotating on the y-axis</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="rotated"&gt;Rotated&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(0, 1, 0, 60deg);
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}}</p>
+
+<h3 id="Rotating_on_a_custom_axis">Rotating on a custom axis</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="rotated"&gt;Rotated&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(1, 2, -1, 192deg);
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Result_2">Result</h4>
+
+<p>{{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>Please see the <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> data type for compatibility info.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
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..7caca80cca
--- /dev/null
+++ b/files/ru/web/css/transform-function/scale3d()/index.html
@@ -0,0 +1,99 @@
+---
+title: scale3d()
+slug: Web/CSS/transform-function/scale3d()
+translation_of: Web/CSS/transform-function/scale3d()
+---
+<div>{{CSSRef}}</div>
+
+<p><code>scale3d()</code> CSS функция изменяет размер элемента. Благодяря величине масштабирования определенной вектором, может изменять различные размеры в разных масштабах.</p>
+
+<p>Это преобразование характеризуется вектором, координаты которого определяют, сколько масштабирования выполняется в каждом направлении. Если все три координаты вектора равны, масштабирование равномерно или изотропно, а форма элемента сохраняется. В этом случае функция масштабирования определяет гомотетическое преобразование.</p>
+
+<p>Когда вне диапазона [-1, 1], масштабирование увеличивает элемент в направлении координаты; Когда внутри диапазона он сжимает элемент в этом направлении. При равном 1 он ничего не делает, а когда отрицательный, он выполняет точечное отражение и модификацию размера.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">scale3d(<em>sx</em>, <em>sy</em>, <em>sz</em>)
+</pre>
+
+<h2 id="Значения">Значения</h2>
+
+<dl>
+ <dt><em>sx</em></dt>
+ <dd>Является  {{cssxref("&lt;number&gt;")}} , представляющим абсцисс вектора масштабирования.</dd>
+ <dt><em>sy</em></dt>
+ <dd>Является  {{cssxref("&lt;number&gt;")}} , представляющим ординату вектора масштабирования.</dd>
+ <dt><em>sz</em></dt>
+ <dd>Является  {{cssxref("&lt;number&gt;")}}, представляющим z-компонент масштабирующего вектора.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">Это преобразование применяется к пространству 3D и не может быть представлено на плоскости.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>sz</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>sz</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Without_changing_the_origin">Without changing the origin</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;foo&lt;/p&gt;
+&lt;p class="transformed"&gt;bar&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed {
+  transform: perspective(500px) scale3d(0.8, 2, 0.2) translateZ(100px);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Without_changing_the_origin","100%","200")}}</p>
+
+<h3 id="Translating_the_origin_of_the_transformation">Translating the origin of the transformation</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;foo&lt;/p&gt;
+&lt;p class="transformed"&gt;bar&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed {
+  transform: scale3d(2, 3, 0);
+  transform-origin: center;
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Result_2">Result</h4>
+
+<p>{{EmbedLiveSample("Translating_the_origin_of_the_transformation","100%","200")}}</p>
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..04ff2df26c
--- /dev/null
+++ b/files/ru/web/css/transform-function/skew()/index.html
@@ -0,0 +1,117 @@
+---
+title: skew()
+slug: Web/CSS/transform-function/skew()
+translation_of: Web/CSS/transform-function/skew()
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> функция <strong><code>skew()</code></strong> трансформирует элемент, наклоняя его в 2D-пространстве.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-skew.html")}}</div>
+
+
+
+<p>Данная трансформация является линейным преобразованием векторного пространства (трансвекция или <a href="https://en.wikipedia.org/wiki/Shear_mapping">shear mapping</a>), которое деформирует каждую точку элемента на определенный угол по горизонтали или вертикали. Координаты каждой точки изменяются на величину, пропорциональную указанному углу и расстоянию до точки, относительно которой выполняется трансформация (origin); таким образом, чем больше расстояние до смещаемой точки элемента, тем больше она будет смещена по горизонтали или вертикали.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Функция <code>skew()</code> задается одним или двумя значениями которые отображают наклон в каждом из направлений.</p>
+
+<pre class="syntaxbox notranslate">skew(<em>ax</em>)
+
+skew(<em>ax</em>, <em>ay</em>)
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>ax</code></dt>
+ <dd>Указывается значение {{cssxref("&lt;angle&gt;")}}, которое является углом наклона вдоль оси X.</dd>
+ <dt><code>ay</code></dt>
+ <dd>Указывается значение {{cssxref("&lt;angle&gt;")}}, которое является углом наклона вдоль оси Y. Если данное значение не задано, то по умолчанию оно равно <code>0</code>. В этом случае вертикального наклона не будет, а будет только горизонтальный.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd></mtr><mtr>tan(ay)<mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr><mtr></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 tan(ay) tan(ax) 1 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Используя_только_наклон_по_оси_x">Используя только наклон по оси x</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Обычный&lt;/div&gt;
+&lt;div class="skewed"&gt;Наклоненный&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.skewed {
+  transform: skew(10deg); /* Equal to skewX(10deg) */
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Using_a_single_x-angle", 200, 200)}}</p>
+
+<h3 id="Используя_два_угла">Используя два угла</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Обычный&lt;/div&gt;
+&lt;div class="skewed"&gt;Наклоненный&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.skewed {
+  transform: skew(10deg, 10deg);
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample("Using_two_angles", 200, 200)}}</p>
+
+<h2 id="Поддержка_браузеров">Поддержка браузеров</h2>
+
+<p>Please see the <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> data type for compatibility info.</p>
+
+<h2 id="Смотрите_так_же">Смотрите так же</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>