perspective

Свойство 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>

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