transform-style
Поддержка браузерами
| 12.0+ | 11.0+ | 16.0+ | 36.0+ | 23.0+ | 9.0+ |
Описание
CSS свойство transform-style определяет, как вложенные элементы будут отображаться в трехмерном пространстве.
Использование возможно только совместно со свойством transform.
| Значение по умолчанию: | flat |
|---|---|
| Применяется: | к трансформируемым элементам |
| Анимируется: | нет |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.transformStyle="preserve-3d" |
Синтаксис
transform-style: flat|preserve-3d|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| flat | Дочерние элементы не сохраняют свою позицию в пространстве. |
| preserve-3d | Дочерние элементы сохраняют свою позицию в пространстве. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<style>
#div1 {
position: relative;
height: 200px;
width: 200px;
margin: 30px;
padding: 10px;
border: 1px solid black;
}
#div2 {
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateY(60deg);
transform-style: preserve-3d;
}
#div3 {
padding: 40px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateY(80deg);
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">HELLO
<div id="div3">YELLOW</div>
</div>
</div>
</body>
</html>
Результат данного примера в окне браузера:
