perspective

Experimental

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Описание

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

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

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

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

Начальное значениеnone
Применяется ктрансформируемые элементы
Наследуетсянет
Обработка значенияабсолютная длина или none
Animation typeдлина
Создаёт контекст наложенияда

Синтаксис

/* Keyword value */
perspective: none;

/* Значения <length> */
perspective: 20px;
perspective: 3.5em;

/* Глобальные значения */
perspective: inherit;
perspective: initial;
perspective: unset;

Значения

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

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

none | (en-US) <length>

Примеры

Три куба

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;
}

Результат

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

Спецификация Статус Комментарий
CSS Transforms Level 1
Определение 'perspective' в этой спецификации.
Рабочий черновик Первоначальное определение

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Базовая поддержка

12-webkit (en-US)10 (10)
45

(Да)-webkit (en-US)
(Да)

10 (10)-moz (en-US)
16 (16)[1]

10 15-webkit (en-US) (Да)-webkit (en-US)
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Базовая поддержка 3.0-webkit (en-US) (Да)-webkit (en-US)
(Да)
10.0 (10)-moz (en-US)
16.0 (16)[1]
8.1 (Да)-webkit (en-US) (Да)-webkit (en-US)

[1] In addition to the unprefixed support, Gecko 45.0 (Firefox 45.0 / Thunderbird 45.0 / SeaMonkey 2.42) 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 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

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