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