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

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии