Кратко
СкопированоСвойство 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>