perspective-origin в CSS — точка сходу тривимірної сцени
автор: Svitlana
Загальний опис
автор: NagarD
- Нотатка
-
Зверніть увагу, що ця технологія експериментальна, й може не працювати в деяких браузерах. Синтаксис і поведінка
автор: Svitlanabackface-visibilityможе змінюватися у майбутньому.
Синтаксис
perspective-origin: x-axis y-axis|initial|inherit;Властивість perspective-origin може отримувати 4 значень:
-
x-axis -
Визначає, де вид знаходиться на вісі х
автор: Svitlana -
y-axis -
Визначає, де вид знаходиться на вісі у
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивостей від свого батьківського елемента
автор: Svitlana
| Значення без задання: | 50% 50% |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.perspectiveOrigin="10px 50%" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 36 | 16 | 9 | 23 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 36 | 16 | 9 |
Приклади
+ запропонувати свій приклад у пісочниці
perspective-origin зсуває точку, з якої глядач дивиться на 3D-сцену: типово це центр, у другій сцені — лівий верхній кут, тож той самий поворот виглядає інакше.
HTML
<div class="scene one"><div class="card">центр</div></div>
<div class="scene two"><div class="card">10% 10%</div></div>CSS
.scene {
display: inline-block;
margin-right: 32px;
perspective: 300px;
}
.two {
perspective-origin: 10% 10%;
}
.card {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: #0172ad;
color: #fff;
transform: rotateY(45deg);
}Демонстрація дії різних значень властивості
HTML
<p>Вибери потрібне значення для <code>perspective-origin</code>(у відсотках):</p>
<input type="number" value="50" step="10" max="100" min="0" id="field"></input>
<input type="number" value="50" step="10" max="100" min="0" id="field2"></input>
<div id="container">
<div class="rotate">
Привіт! :)
</div>
</div>CSS
body {
padding: 36px;
text-align: center;
line-height: 1.45;
font-size: 17px;
font-family: sans-serif;
}
#field,
#field2{
padding: 8px;
}
#container {
padding: 16px;
perspective: 100px;
}
.rotate {
width: 100px;
padding: 30px;
text-align: center;
background: gold;
transform: rotateX(15deg);
margin: 36px auto 0 auto;
perspective: 100px;
}JS
var container = document.getElementById('container');
var field = document.getElementById('field');
var field2 = document.getElementById('field2');
field.onchange = field2.onchange = function change() {
var newVal = getNewValue();
container.style.perspectiveOrigin = newVal[0] + '% ' + newVal[1] + '%';
};
function getNewValue() {
var result = [];
result[0] = field.value;
result[1] = field2.value;
return result;
}
//# 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 block">
<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="block">
<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 block">
</div>CSS
.gallery {
text-align: center;
perspective: 800px;
}
.left {
transform: rotateY(-30deg);
transform-origin: right center;
}
.right {
transform: rotateY(30deg);
transform-origin: left center;
}
.block{
width: 200px;
}Шість однакових сцен, у кожній та сама картка з rotateY(45deg). Міняється лише perspective-origin — і схил картки щоразу інший: центр, лівий верхній кут, правий край, низ. П'ята сцена показує, що без perspective властивість не діє, шоста — що функція perspective() у самій картці слухається transform-origin, а не ока батька.
HTML
<div class="grid">
<figure><div class="scene s1"><div class="card"></div></div><figcaption>50% 50% — типове</figcaption></figure>
<figure><div class="scene s2"><div class="card"></div></div><figcaption>left top</figcaption></figure>
<figure><div class="scene s3"><div class="card"></div></div><figcaption>100% 50%</figcaption></figure>
<figure><div class="scene s4"><div class="card"></div></div><figcaption>50% 100%</figcaption></figure>
<figure><div class="scene s5"><div class="card"></div></div><figcaption>perspective: none — дії немає</figcaption></figure>
<figure><div class="scene s6"><div class="card fn"></div></div><figcaption>perspective() у картці — око батька не враховано</figcaption></figure>
</div>CSS
.grid {
display: flex;
flex-wrap: wrap;
gap: 18px;
}
figure {
margin: 0;
}
figcaption {
margin-top: 6px;
max-width: 170px;
font: .8em/1.35 system-ui, sans-serif;
color: #5a6472;
}
.scene {
width: 170px;
height: 170px;
background: #eef1f5;
border: 1px dashed #b9c6d8;
perspective: 260px;
}
.card {
width: 110px;
height: 110px;
margin: 30px;
background: linear-gradient(135deg, #2f6fd0, #72b043);
transform: rotateY(45deg);
}
.s1 { perspective-origin: 50% 50%; }
.s2 { perspective-origin: left top; }
.s3 { perspective-origin: 100% 50%; }
.s4 { perspective-origin: 50% 100%; }
.s5 {
perspective: none;
perspective-origin: left top;
}
.s6 {
perspective: none;
perspective-origin: left top;
}
.fn {
transform: perspective(260px) rotateY(45deg);
}Коментарі
Коментарів ще немає — будьте першим!