perspective

Свойство perspective определяет расстояние от пользователя до плоскости экрана по оси z. При уменьшении значения свойства perspective элементы (или части элементов), расположенные выше плоскости экрана по оси z (ближе к зрителю) увеличиваются в размерах, а те, что дальше — уменьшаются. Таким образом можно придать глубину элементу, к которому применяется свойство transform. Эффект заметен только при 3D-трансформациях.

Свойство perspective влияет на вложенные элементы контейнера, для которого указано, а не на сам контейнер.

        
          
          .parent {  perspective: 50px;}.child {  transform: rotateX(10deg);}
          .parent {
  perspective: 50px;
}

.child {
  transform: rotateX(10deg);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Значение по умолчанию — none. Оно отменяет перспективу.

Значением может быть положительное число в доступных единицах измерения.

С применением свойства perspective и свойства transform элемент может отображаться по-разному.

        
          
          .perspective-50 {  perspective: 50px;}.perspective-100 {  perspective: 100px;}.transform-rotate-x {  background-color: #F498AD;  transform: rotateX(50deg);}.transform-rotate-y {  background-color: #2E9AFF;  transform: rotateY(20deg);}
          .perspective-50 {
  perspective: 50px;
}

.perspective-100 {
  perspective: 100px;
}

.transform-rotate-x {
  background-color: #F498AD;
  transform: rotateX(50deg);
}

.transform-rotate-y {
  background-color: #2E9AFF;
  transform: rotateY(20deg);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          <div class="parent perspective-50">  <div class="transform-rotate-x">    Перспектива 50 градусов по <i>x</i>  </div></div><div class="parent perspective-100">  <div class="transform-rotate-y">    Перспектива 20 градусов по <i>y</i>  </div></div>
          <div class="parent perspective-50">
  <div class="transform-rotate-x">
    Перспектива 50 градусов по <i>x</i>
  </div>
</div>

<div class="parent perspective-100">
  <div class="transform-rotate-y">
    Перспектива 20 градусов по <i>y</i>
  </div>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

На практике

Скопировать ссылку "На практике" Скопировано

Денис Вакуленко советует

Скопировать ссылку "Денис Вакуленко советует" Скопировано

🛠 Для точного масштабирования в перспективе мы можем определить, во сколько раз увеличится элемент, по формуле d/(d-z), где d — значение свойства perspective, z — смещение элемента отностительно плоскости экрана по оси z. Смещение по оси z определяем следующим образом: если задали элементу transform: translateZ(100px), то параметр z равен 100px, а если задали элементу transform: rotateY(20deg), то для крайней левой точки элемента смещение по оси z определяется как sin(20), умноженный на половину изначальной ширины элемента.

Рассмотрим на конкретном примере: изначальная ширина элемента — 500px, высота — 150px, элемент повёрнут на 45°, родителю зададим perspective: 700px. Применяем формулу: 700 / (700 - sin(45) * 250) = 1,3379 — во столько раз увеличится высота элемента в крайней левой точке. Подставляя разные значения в формулу можем «на бумаге» рассчитать эффект перспективы.

+ Развернуть