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 */
}
