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