transform-style
CSS свойство transform-style
Поддержка браузеров
 |
 |
 |
 |
 |
 |
|
 |
|
|
Chrome и Safari поддерживают альтернативное свойство -webkit-transform-style.
Описание
Свойство transform-style определяет, как вложенные элементы будут отображаться в трехмерном пространстве.
Использование возможно только совместно со свойством transform.
| Значение по умолчанию: | flat |
|---|---|
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.transformStyle="preserve-3d" |
Значения свойства
| Значение | Описание |
|---|---|
| flat | Дочерние элементы не сохраняют свою позицию в пространстве. |
| preserve-3d | Дочерние элементы сохраняют свою позицию в пространстве. |
#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;
-webkit-transform: rotateY(60deg); /* Safari и Chrome */
-webkit-transform-style: preserve-3d; /* Safari и Chrome */
}
#div3{
padding:40px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateY(80deg);
-webkit-transform: rotateY(-60deg); /* Safari и Chrome */
}
