From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/perspective/index.html | 284 ++++++++++++++++++++++++++++++++ 1 file changed, 284 insertions(+) create mode 100644 files/ru/web/css/perspective/index.html (limited to 'files/ru/web/css/perspective') 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 +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Описание

+ +

Свойство CSS perspective определяет расcтояние между плоскостью z = 0 и пользователем для того чтобы придать 3D-позиционируемому элементу эффект переспективы. Каждый трансформируемый элемент с z > 0 станет больше, с z < 0 соответственно меньше.

+ +

Элементы части которые находятся за пользователем, т.е. z-координата этих элементов больше чем значение  свойства perspective, не отрисовываются.

+ +

Точка схождения по-умолчанию расположена в центре элемента, но её можно переместить используя свойство {{ cssxref("perspective-origin") }}.

+ +

При использовании данного свойства со значениями отличными от 0 или none создается новый stacking context.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
/* Keyword value */
+perspective: none;
+
+/* Значения <length> */
+perspective: 20px;
+perspective: 3.5em;
+
+/* Глобальные значения */
+perspective: inherit;
+perspective: initial;
+perspective: unset;
+
+ +

Значения

+ +
+
none
+
Указывает что трасформация перспективы к элементу применяться не будет.
+
<length>
+
{{cssxref("<length>")}} устанавливает растояние от пользователя до плоскости z = 0. Применяет трасформацию к элементу и его содержимому. Если значение отрицательно или равно 0, то преобразование не применяется.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Три куба

+ +

HTML Content

+ +
<table>
+   <tbody>
+      <tr>
+         <th><code>perspective: 250px;</code>
+         </th>
+         <th><code>perspective: 350px;</code>
+         </th>
+         <th><code>perspective: 500px;</code>
+         </th>
+      </tr>
+      <tr>
+         <td>
+            <div class="container">
+               <div class="cube pers250">
+                  <div class="face front">1</div>
+                  <div class="face back">2</div>
+                  <div class="face right">3</div>
+                  <div class="face left">4</div>
+                  <div class="face top">5</div>
+                  <div class="face bottom">6</div>
+               </div>
+            </div>
+         </td>
+         <td>
+            <div class="container">
+               <div class="cube pers350">
+                  <div class="face front">1</div>
+                  <div class="face back">2</div>
+                  <div class="face right">3</div>
+                  <div class="face left">4</div>
+                  <div class="face top">5</div>
+                  <div class="face bottom">6</div>
+               </div>
+            </div>
+         </td>
+         <td>
+            <div class="container">
+               <div class="cube pers500">
+                  <div class="face front">1</div>
+                  <div class="face back">2</div>
+                  <div class="face right">3</div>
+                  <div class="face left">4</div>
+                  <div class="face top">5</div>
+                  <div class="face bottom">6</div>
+               </div>
+            </div>
+         </td>
+      </tr>
+   </tbody>
+</table>
+ +

CSS Content

+ +
/* Короткие классы для различных значений 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;
+}
+ +

Результат

+ +

{{ EmbedLiveSample('Three_cubes', 940, 460) }}

+ +

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

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКоментарий
{{ Specname('CSS3 Transforms', '#perspective', 'perspective') }}{{ Spec2('CSS3 Transforms') }}Первоначальное определение
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка +

12{{ property_prefix('-webkit') }}{{ CompatGeckoDesktop("10") }}
+ 45

+ 		{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		 +

{{ CompatGeckoDesktop("10") }}{{ property_prefix('-moz') }}
+ {{ CompatGeckoDesktop("16") }}[1]

+ 		1015{{ property_prefix('-webkit') }}{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка3.0{{ property_prefix('-webkit') }}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{ CompatGeckoMobile("10") }}{{ property_prefix('-moz') }}
+ {{ CompatGeckoMobile("16") }}[1]		8.1{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}
+
+ +

[1] In addition to the unprefixed support, Gecko 45.0 {{geckoRelease("45.0")}} added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to true.

+ +

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

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