CSS perspective — глибина в тривимірних перетвореннях
Властивість perspective визначає відстань від площини екрана до точки збіжності ліній і тим самим задає, наскільки виражений ефект перспективи. Точка збіжності без задання розташовується в центрі елемента і може бути змінена за допомогою властивості perspective-origin.
Результат роботи властивості зображений на рисунку. Зверніть увагу, що перспектива застосовується не до елементів безпосередньо, а до їх батьків. Для зміни перспективи у окремих елементів використовується функція perspective() властивості transform.
Більш конкретно, властивість регулює положення нащадків елементу. Тому якщо ви хочете побачити ефект дії цієї властивості на елементі, задавайте її для його батька.
Менше значення робить 3д-ефект більш вираженним, ніж більші значення. Це тому що, менше значення вказує, що користувач знаходить ближче до об'єкта. Тому perspective: 50px; робить перспективу більш вираженою ніж perspective: 500px;.
Загальний опис
автор: NagarD
- Нотатка
-
Ви зможете побачити як працює ця властивість, тільки коли у елемента є точки, у яких різне положення по осі Z. Наприклад, коли елемент повернули по осі X чи Y.
автор: Svitlana - Нотатка
-
Зверніть увагу, що ця технологія експериментальна, й може не працювати в деяких браузерах. Синтаксис і поведінка
автор: Svitlanabackface-visibilityможе змінюватися у майбутньому.
Синтаксис
perspective: length|none;Властивість perspective може отримувати 4 значень:
-
length -
Відстань від площини монітора до точки збіжності ліній. Нульове або від'ємне значення скасовує дію перспективи. Чим менше значення, тим більш вираженою виглядає перспектива і навпаки
автор: Svitlana -
none -
Перспективу не встановлено. Те ж саме, що й 0. Без задання.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивостей від свого батьківського елемента
автор: Svitlana
| Значення без задання: | none |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.perspective="50px" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 36 | 16 | 9 | 23 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 36 | 16 | 9 |
Приклади
+ запропонувати свій приклад у пісочниці
Обидва квадрати повернуто на ті самі 45°, але ліва сцена дивиться з відстані 500px — спотворення сильне, права з 1500px — м'яке. Що менше значення, то ближча «камера».
HTML
<div class="scene near"><div class="card">500px</div></div>
<div class="scene far"><div class="card">1500px</div></div>CSS
.scene {
display: inline-block;
margin-right: 32px;
}
.near { perspective: 500px; }
.far { perspective: 1500px; }
.card {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: #0172ad;
color: #fff;
transform: rotateY(45deg);
}Той самий rotateY(45deg): без perspective поворот плаский, із perspective на батькові з'являється глибина, і менше значення підсилює ефект.
HTML
<div class="row">
<div class="stage">
<div class="card">без perspective</div>
</div>
<div class="stage p900">
<div class="card">perspective: 900px</div>
</div>
<div class="stage p250">
<div class="card">perspective: 250px</div>
</div>
</div>CSS
body {
font-family: sans-serif;
font-size: 15px;
}
.row {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.stage {
width: 170px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
background: #eef6ff;
border: 1px solid #0172ad;
}
.p900 {
perspective: 900px;
}
.p250 {
perspective: 250px;
}
.card {
width: 120px;
height: 90px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 6px;
background: gold;
border: 2px solid #333;
transform: rotateY(45deg);
}Динамічний приклад зміни значення властивості
HTML
<div id="playground-result">
<div id="playground-property">Властивість perspective визначає відстань від площини екрана до точки збіжності ліній і тим самим задає, наскільки виражений ефект перспективи. Точка збіжності без задання розташовується в центрі елемента і може бути змінена за допомогою властивості perspective-origin.</div>
</div>
<div id="playground-value" class="cell medium-12 large-6">
<input type="range" min="500" max="1000" value="1" id="playground-value-input">
</div>CSS
#playground-property{
background: #e4efc7;
padding: 10px;
transform: rotateY(15deg);
}
#playground-result{
transition: none 0s ease 0s;
perspective: 1000px;
perspective-origin: 0px 50%;
margin-bottom: 30px;
}
.child {
background: #e4efc7;
padding: 10px;
transform: rotateY(15deg);
}
.parent {
perspective-origin: 0 50%;
perspective: 1000px;
}JS
var range = document.querySelectorAll('#playground-value-input');
function changeHandler(event) {var px = this.value == 0 ? '' : 'px';document.getElementById('playground-result').style.perspective = this.value + px;document.getElementById('playground-code-value').innerText = this.value + px;}
Array.prototype.forEach.call(range, function (range) {range.addEventListener('input', changeHandler);});
//# sourceURL=pen.jsHTML
<div class="gallery">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="" class="left">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="" class="right">
</div>CSS
.gallery {
text-align: center;
perspective: 800px;
}
.left {
transform: rotateY(-30deg);
transform-origin: right center;
}
.right {
transform: rotateY(30deg);
transform-origin: left center;
}Коментарі
Коментарів ще немає — будьте першим!