initial commit

1 files changed, 284 insertions, 0 deletions

diff --git a/files/ru/web/css/perspective/index.html b/files/ru/web/css/perspective/index.html
new file mode 100644
index 0000000000..f0cd21e705
--- /dev/null
+++ b/files/ru/web/css/perspective/index.html
@@ -0,0 +1,284 @@
+---
+title: perspective
+slug: Web/CSS/perspective
+translation_of: Web/CSS/perspective
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Свойство <a href="/en/CSS" title="CSS">CSS</a> <strong><code>perspective </code></strong><code>определяет расcтояние между плоскостью z = 0 и пользователем для того чтобы придать 3D-позиционируемому элементу эффект переспективы. Каждый трансформируемый элемент с z &gt; 0 станет больше, с z &lt; 0 соответственно меньше.</code></p>
+
+<p>Элементы части которые находятся за пользователем, т.е. z-координата этих элементов больше чем значение  свойства <code>perspective, не отрисовываются.</code></p>
+
+<p><em><code>Точка схождения </code></em><code>по-умолчанию расположена в центре элемента, но её можно переместить используя свойство </code>{{ cssxref("perspective-origin") }}.</p>
+
+<p>При использовании данного свойства со значениями отличными от 0 или none создается новый <a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">stacking context</a>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: css">/* Keyword value */
+perspective: none;
+
+/* Значения &lt;length&gt; */
+perspective: 20px;
+perspective: 3.5em;
+
+/* Глобальные значения */
+perspective: inherit;
+perspective: initial;
+perspective: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd><font face="Consolas, Liberation Mono, Courier, monospace">Указывает что трасформация перспективы к элементу применяться не будет.</font></dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>{{cssxref("&lt;length&gt;")}} у<code>станавливает растояние от пользователя до плоскости z = 0. Применяет трасформацию к элементу и его содержимому. Если значение отрицательно или равно 0, то преобразование не применяется.</code></dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Three_cubes" name="Three_cubes">Три куба</h3>
+
+<h4 id="HTML_Content">HTML Content</h4>
+
+<pre class="brush: html">&lt;table&gt;
+   &lt;tbody&gt;
+      &lt;tr&gt;
+         &lt;th&gt;&lt;code&gt;perspective: 250px;&lt;/code&gt;
+         &lt;/th&gt;
+         &lt;th&gt;&lt;code&gt;perspective: 350px;&lt;/code&gt;
+         &lt;/th&gt;
+         &lt;th&gt;&lt;code&gt;perspective: 500px;&lt;/code&gt;
+         &lt;/th&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;
+            &lt;div class="container"&gt;
+               &lt;div class="cube pers250"&gt;
+                  &lt;div class="face front"&gt;1&lt;/div&gt;
+                  &lt;div class="face back"&gt;2&lt;/div&gt;
+                  &lt;div class="face right"&gt;3&lt;/div&gt;
+                  &lt;div class="face left"&gt;4&lt;/div&gt;
+                  &lt;div class="face top"&gt;5&lt;/div&gt;
+                  &lt;div class="face bottom"&gt;6&lt;/div&gt;
+               &lt;/div&gt;
+            &lt;/div&gt;
+         &lt;/td&gt;
+         &lt;td&gt;
+            &lt;div class="container"&gt;
+               &lt;div class="cube pers350"&gt;
+                  &lt;div class="face front"&gt;1&lt;/div&gt;
+                  &lt;div class="face back"&gt;2&lt;/div&gt;
+                  &lt;div class="face right"&gt;3&lt;/div&gt;
+                  &lt;div class="face left"&gt;4&lt;/div&gt;
+                  &lt;div class="face top"&gt;5&lt;/div&gt;
+                  &lt;div class="face bottom"&gt;6&lt;/div&gt;
+               &lt;/div&gt;
+            &lt;/div&gt;
+         &lt;/td&gt;
+         &lt;td&gt;
+            &lt;div class="container"&gt;
+               &lt;div class="cube pers500"&gt;
+                  &lt;div class="face front"&gt;1&lt;/div&gt;
+                  &lt;div class="face back"&gt;2&lt;/div&gt;
+                  &lt;div class="face right"&gt;3&lt;/div&gt;
+                  &lt;div class="face left"&gt;4&lt;/div&gt;
+                  &lt;div class="face top"&gt;5&lt;/div&gt;
+                  &lt;div class="face bottom"&gt;6&lt;/div&gt;
+               &lt;/div&gt;
+            &lt;/div&gt;
+         &lt;/td&gt;
+      &lt;/tr&gt;
+   &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS_Content">CSS Content</h4>
+
+<pre class="brush: css">/* Короткие классы для различных значений perspective */
+.pers250 {
+    perspective: 250px;
+    -webkit-perspective: 250px;
+}
+.pers350 {
+    perspective: 350px;
+    -webkit-perspective: 350px;
+}
+.pers500 {
+    perspective: 500px;
+    -webkit-perspective: 500px;
+}
+
+/* Определяем div.container, div.cube, и свойства граней куба */
+ .container {
+   width: 200px;
+   height: 200px;
+   margin: 75px 0 0 75px;
+   border: none;
+}
+.cube {
+   width: 100%;
+   height: 100%;
+   backface-visibility: visible;
+   perspective-origin: 150% 150%;
+   transform-style: preserve-3d;
+   -webkit-backface-visibility: visible;
+   -webkit-perspective-origin: 150% 150%;
+   -webkit-transform-style: preserve-3d;
+}
+.face {
+   display: block;
+   position: absolute;
+   width: 100px;
+   height: 100px;
+   border: none;
+   line-height: 100px;
+   font-family: sans-serif;
+   font-size: 60px;
+   color: white;
+   text-align: center;
+}
+
+/* Определяем каждую грань в зависимости от направления */
+ .front {
+   background: rgba(0, 0, 0, 0.3);
+   transform: translateZ(50px);
+   -webkit-transform: translateZ(50px);
+}
+.back {
+   background: rgba(0, 255, 0, 1);
+   color: black;
+   transform: rotateY(180deg) translateZ(50px);
+   -webkit-transform: rotateY(180deg) translateZ(50px);
+}
+.right {
+   background: rgba(196, 0, 0, 0.7);
+   transform: rotateY(90deg) translateZ(50px);
+   -webkit-transform: rotateY(90deg) translateZ(50px);
+}
+.left {
+   background: rgba(0, 0, 196, 0.7);
+   transform: rotateY(-90deg) translateZ(50px);
+   -webkit-transform: rotateY(-90deg) translateZ(50px);
+}
+.top {
+   background: rgba(196, 196, 0, 0.7);
+   transform: rotateX(90deg) translateZ(50px);
+   -webkit-transform: rotateX(90deg) translateZ(50px)
+}
+.bottom {
+   background: rgba(196, 0, 196, 0.7);
+   transform: rotateX(-90deg) translateZ(50px);
+   -webkit-transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* Делаем таблицу немного лучше */
+th, p, td {
+   background-color: #EEEEEE;
+   padding: 10px;
+   font-family: sans-serif;
+   text-align: left;
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Three_cubes', 940, 460) }}</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ Specname('CSS3 Transforms', '#perspective', 'perspective') }}</td>
+   <td>{{ Spec2('CSS3 Transforms') }}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>
+    <p>12{{ property_prefix('-webkit') }}{{ CompatGeckoDesktop("10") }}<br>
+     45</p>
+   </td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}}</td>
+   <td>
+    <p>{{ CompatGeckoDesktop("10") }}{{ property_prefix('-moz') }}<br>
+     {{ CompatGeckoDesktop("16") }}<sup>[1]</sup></p>
+   </td>
+   <td>10</td>
+   <td>15{{ property_prefix('-webkit') }}</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>3.0{{ property_prefix('-webkit') }}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("10") }}{{ property_prefix('-moz') }}<br>
+    {{ CompatGeckoMobile("16") }}<sup>[1]</sup></td>
+   <td>8.1</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In addition to the unprefixed support, Gecko 45.0 {{geckoRelease("45.0")}} added support for a <code>-webkit</code> prefixed version of the property for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_transforms" title="/en-US/docs/CSS/Using_CSS_transforms">Using CSS Transforms</a></li>
+</ul>