Важно знать, что браузеры Chrome и Safari поддерживают альтернативное свойство -webkit-transform-style. Это стоит учитывать при кроссбраузерной разработке. Свойство transform-style отвечает за то, как именно вложенные элементы будут отображаться в трехмерном пространстве. От него зависит глубина и реалистичность визуального эффекта! Обратите внимание: использовать это свойство можно только совместно со свойством transform. | Значение по умолчанию: | flat | | Наследуется: | нет | | Версия: | CSS3 | | Синтаксис JavaScript: | object.style.transformStyle="preserve-3d" | | Значение | Описание | | flat | Дочерние элементы не сохраняют свою позицию в пространстве. | | preserve-3d | Дочерние элементы сохраняют свою позицию в пространстве. | Пример html head style type="text/css" #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 */ } /style /head body div id="div1" div id="div2"HELLO div id="div3"YELLOW/div /div /div /body /html
|