CSS perspective() — глибина 3D-сцени
Опис
perspective() - це функція трансформації CSS, яка встановлює властивість перспективи для елемента з 3D-трансформаціями. Вона впливає на те, як елементи змінюються у тривимірному просторі, надаючи реалістичність до 3D-сцен та об'єктів на сторінці.
За допомогою функції perspective(), можна створювати ефект глибини та віддаленості. Це додає реалізм до вашого веб-сайту та дозволяє контролювати спосіб відображення елементів у 3D-просторі. Функція perspective() працює разом з іншими функціями трансформації, такими як rotate(), translate(), scale() та іншими, щоб створювати складні ефекти перетворення.
Ця функція приймає один параметр - числове значення (length), яке представляє відстань від точки перегляду до площини перегляду. Значення може бути позитивним числом, вказуючи відстань у пікселях або інших одиницях вимірювання.
Наприклад, для встановлення відстані до площини перегляду в 1000 пікселів, використовуйте:
.element {
perspective: 1000px;
}
Варто зауважити, що значення length може бути негативним, але це застосовується до спеціальних випадків, наприклад, для створення ефекту обертання зсередини (inside-out flipping) в 3D-просторі. Застосування функції perspective() дозволяє створювати вражаючі та реалістичні 3D-ефекти на вашому веб-сайті.
Загальний опис
автор: NagarD
- Порада
-
Використовуйте функцію
автор: Bondperspective()для створення реалістичних 3D-ефектів та глибини на сторінці. - Порада
-
За замовчуванням, значення
автор: Bondlengthвимірюється в пікселях, але можна використовувати інші одиниці вимірювання, такі як відсотки (%),em,remтощо.
Синтаксис
perspective(<length>);Функція perspective може отримувати єдине значення:
-
<length> -
Значення може бути позитивним числом, вказуючи відстань у пікселях або інших одиницях вимірювання (em тощо).
автор: Bond
| Значення без задання: | none |
|---|
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 12 | 10 | 4 | 15 | 12 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 3 | 18 | 10 | 3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
При наведенні курсору на елемент, він змінює свою глибину та вигляд у тривимірному просторі.
HTML
<div id="description">
<h2>Приклад 1: зміна елемента за допомогою функції perspective()</h2>
<p>При наведенні курсору на елемент, він змінює свою глибину та вигляд у тривимірному просторі.</p>
</div>
<div id="result">
<div class="element"></div>
</div>CSS
#description {
background: #f2f2f2;
padding: 20px;
font-family: Arial, sans-serif;
}
#result {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.element {
width: 200px;
height: 200px;
background-color: #ff6347;
transition: transform 0.3s ease;
}
.element:hover {
perspective: 500px;
transform: rotateY(45deg);
}Два однакові елементи, але один з них має змінену глибину після застосування функції perspective().
HTML
<div id="description">
<h2>Приклад 2: зміна глибини елемента за допомогою функції perspective()</h2>
<p>Два однакові елементи, але один з них має змінену глибину після застосування функції perspective().</p>
</div>
<div id="result">
<div class="element"></div>
<div class="element transformed"></div>
</div>CSS
#description {
background: #f2f2f2;
padding: 20px;
font-family: Arial, sans-serif;
}
#result {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.element {
width: 200px;
height: 200px;
background-color: #ff6347;
margin-right: 20px;
}
.transformed {
perspective: 500px;
transform: rotateY(45deg);
}Чотири однакові картки, повернуті на rotateY(45deg). Різниця тільки в перспективі: чим менше значення, тим глибше спотворення, а остання картка показує, що буває, коли perspective() стоїть не першою.
HTML
<div id="description">
<h2>Чим менша відстань, тим сильніше спотворення</h2>
<p>Усі картки повернуто однаково. Остання доводить, що порядок функцій у transform має значення.</p>
</div>
<div id="result">
<div class="cell">
<div class="card a">2000px</div>
<p>perspective(2000px) rotateY(45deg)</p>
</div>
<div class="cell">
<div class="card b">600px</div>
<p>perspective(600px) rotateY(45deg)</p>
</div>
<div class="cell">
<div class="card c">200px</div>
<p>perspective(200px) rotateY(45deg)</p>
</div>
<div class="cell">
<div class="card d">не працює</div>
<p>rotateY(45deg) perspective(600px) — перспектива стоїть не першою й не діє</p>
</div>
</div>CSS
#description {
background: #f2f2f2;
padding: 20px;
font-family: Arial, sans-serif;
}
#result {
display: flex;
flex-wrap: wrap;
gap: 26px;
padding: 36px 24px;
font-family: Arial, sans-serif;
}
.cell {
width: 190px;
text-align: center;
}
.card {
width: 150px;
height: 100px;
margin: 0 auto 16px;
border-radius: 6px;
background: #4169e1;
color: #fff;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.a { transform: perspective(2000px) rotateY(45deg); }
.b { transform: perspective(600px) rotateY(45deg); }
.c { transform: perspective(200px) rotateY(45deg); }
.d {
background: #999;
transform: rotateY(45deg) perspective(600px);
}
.cell p {
font-size: 12px;
color: #555;
margin: 0;
}Коментарі
Коментарів ще немає — будьте першим!