CSS transform-style — 3D у нащадків елемента
Властивість transform-style визначає, спосіб відображення нащадків елементу в 3D-просторі. Властивість задає, чи чи нащадки будуть об'ємними, чи пласкими.
Якщо плющені - нащадки не існуватимуть самостійно у 3D-просторі.
автор: Svitlana
Загальний опис
автор: NagarD
- Нотатка
-
Ця властивість використовується разом з властивістю
автор: Svitlanatransform. - Нотатка
-
Зверніть увагу, що ця технологія експериментальна, й може не працювати в деяких браузерах. Синтаксис і поведінка
автор: Svitlanatransform-styleможе змінюватися у майбутньому.
Синтаксис
transform-style: flat|preserve-3d|initial|inherit;Властивість transform-style може отримувати 4 значень:
-
flat -
Вкладені елементи НЕ зберігатимуть свою 3-d позицію. Без задання.
автор: Svitlana -
preserve-3d -
Вкладені елементи зберігатимуть свою 3-d позицію.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента.
автор: Svitlana
| Значення без задання: | flat |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.transformStyle="preserve-3d" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 36 | 16 | 9 | 23 | 12 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 36 | 16 | 9 |
Приклади
+ запропонувати свій приклад у пісочниці
Батька повернуто на 60°, дитину — на −60° назад. З preserve-3d дитина живе у 3D-просторі батька, і компенсація повертає її обличчям до глядача; з flat (типово) батько сплющує її у власну площину.
HTML
<div class="scene"><div class="parent flat"><div class="child">flat</div></div></div>
<div class="scene"><div class="parent keep"><div class="child">preserve-3d</div></div></div>CSS
.scene {
display: inline-block;
margin-right: 48px;
perspective: 500px;
}
.parent {
width: 120px;
height: 120px;
background: #9dcb4e;
transform: rotateY(60deg);
}
.flat { transform-style: flat; }
.keep { transform-style: preserve-3d; }
.child {
width: 80px;
height: 80px;
margin: 20px;
display: grid;
place-items: center;
background: #0172ad;
color: #fff;
transform: rotateY(-60deg);
}Обидві сцени однакові: батька повернуто на 50 градусів, дитину — на −50 назад, і preserve-3d має повернути її обличчям до глядача. Праворуч на батька додано overflow: hidden — браузер примусово переводить його у flat, компенсація перестає працювати, і дитина перекошується разом із батьком.
HTML
<div class="scene">
<div class="parent"><div class="child">preserve-3d</div></div>
</div>
<div class="scene">
<div class="parent clipped"><div class="child">preserve-3d + overflow: hidden</div></div>
</div>CSS
.scene {
float: left;
width: 45%;
margin-right: 2%;
padding: 20px 0;
perspective: 400px;
}
.parent {
height: 90px;
background: #eef2f7;
transform-style: preserve-3d;
transform: rotateY(50deg);
}
.clipped {
overflow: hidden;
}
.child {
padding: 8px;
color: #fff;
background: #1e6fd9;
transform: rotateY(-50deg);
}Приклад роботи обох значень властивості
HTML
<p>Різні значення(ключові слова) для властивості <code>transform-style</code>:</p>
<hr>
<div class="box">
<div class="block">
<code>transform-style: preserve-3d;</code>
<span>Привіт :)</span>
</div>
</div>
<div class="box">
<div class="block block2">
<code>transform-style: flat;</code>
<span>Привіт :)</span>
</div>
</div>CSS
body {
font-family: monospace;
font-size: 18px;
line-height: 1.54;
}
#form {
padding: 8px 16px;
}
strong {
color: coolgrey;
border: 1px solid orange;
}
.box {
width: 200px;
display: inline-block;
margin-right: 100px;
}
@keyframes rotate {
from { transform: rotateX(0); }
to { transform: rotateX(360deg); }
}
.block {
padding: 76px 0;
font-size: 22px;
background-color: gold;
width: 250px;
text-align: center;
margin: 75px auto 0 auto;
transform-style: preserve-3d;
animation: rotate 10s linear 0s infinite reverse none;
}
.block2 {
transform-style: flat;
}
.block > span {
display: inline-block;
transform: translateZ(100px);
background-color: red;
padding: 4px;
color: #f1f1f1;
}Простий приклад роботи властивості
HTML
<div class="box">
<div class="block">
<code>transform-style: preserve-3d;</code>
<span>Привіт :)</span>
</div>
</div>CSS
body {
font-family: monospace;
font-size: 18px;
line-height: 1.54;
}
#form {
padding: 8px 16px;
}
strong {
color: coolgrey;
border: 1px solid orange;
}
.box {
width: 200px;
display: inline-block;
margin-right: 100px;
}
@keyframes rotate {
from { transform: rotateX(0); }
to { transform: rotateX(360deg); }
}
.block {
padding: 16px 0;
font-size: 22px;
background-color: gold;
width: 250px;
text-align: center;
margin: 75px;
transform-style: preserve-3d;
animation: rotate 10s linear 0s infinite reverse none;
}
.block > span {
display: inline-block;
transform: translateZ(50px);
background-color: red;
padding: 4px;
color: #f1f1f1;
}Коментарі
Коментарів ще немає — будьте першим!