transform-styleВластивість, коли застосовується до елементу, визначає , якщо діти цього елемента розташовані в 3D просторі, або сплощені.
.parent ( transform-style: preserve-3d; )Він приймає одне з двох значень: flat(за замовчуванням) та preserve-3d. Щоб продемонструвати різницю між двома значеннями, натисніть кнопку перемикання в CodePen нижче:
Коли натискається кнопка, демонстрація використовує JavaScript для перемикання transform-styleзначення між preserve-3dта flat.
Як бачите, коли значення змінено на flat, дочірні елементи більше не складаються відповідно до translateZзначень (у тривимірному просторі), а натомість вирівнюються, щоб виглядати так, як елементи за замовчуванням на HTML-сторінці.
Підтримка браузера
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | 4+ | 10+ | 15+ | Жоден | 3.0+ | 3,2+ |
Для всіх браузерів потрібні префікси постачальників, крім Firefox 16+. Opera використовує -webkit-версію 15 та перетворення Blink.
IE10 підтримує 3D-перетворення, але не підтримує transform-styleвластивість.