Свойство perspective
Свойство perspective создает эффект перспективы и добавляет глубину для 3D трансформируемых элементов.
perspective: 500px;Пошаговый план! Как быстро научиться создавать сайты!
- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
perspective: none;
Вращение элемента без создания перспективы. Как результат мы видим "плоскую" трансформацию элемента.
<div class="scene-1">
<div class="scene-1-example"></div>
</div>
<style>
.scene-1 {
width: 200px;
height: 200px;
perspective: none;
}
.scene-1-example {
width: 100%;
height: 100%;
background: green;
transform: rotateX(45deg);
}
</style>perspective: 500px;
Тоже самое вращение элемента, как и в первом примере, но с создание перспективы. Как результат мы видим более естественное вращение с эффектом глубины.
<div class="scene-2">
<div class="scene-2-example"></div>
</div>
<style>
.scene-2 {
width: 200px;
height: 200px;
perspective: 500px;
}
.scene-2-example {
width: 100%;
height: 100%;
background: green;
transform: rotateX(45deg);
}
</style>