| Главная » Все материалы сайта » Справочник CSS-3 » Трансформация |
transform-style | Свойство CSS
transform-styleСвойство transform-style устанавливает положение вложенных элементов в 3D пространстве или плоскости элемента. На момент создания статьи не поддерживалось ни одним браузером, за исключением Safari и Chrome. поддерживающими альтернативное свойство -webkit-transform-style. Это свойство должно применяться совместно со свойством transform и префиксами (альтернативными свойствами) к нему. Свойство применимо к блочным и строчным элементам, создано в версии CSS3 и проходит валидацию согласно версии CSS3. Дополнительные свойства применяемые к transform-style
Дополнительные значения применяемые к transform-style
Свойство работает в браузерах
Пример применения свойства<!DOCTYPE html>
<html lang="ru"> <head> <title>Генератор transform-style для Safari и Chrome</title> <style type="text/css"> <!-- #div1 { position: relative; height: 200px; width: 200px; margin: 50px; padding:10px; border: 1px solid black; } #div2 { padding:50px; position: absolute; border: 1px solid black; background-color: red; transform: rotateY(45deg); transform-origin:50% 50% 100px; -webkit-transform: rotateY(70deg); -webkit-transform-origin:50% 50% 100px; -moz-transform: rotateY(70deg); -moz-transform-origin:50% 50% 100px; -o-transform: rotateY(70deg); -o-transform-origin:50% 50% 100px; } #div3 { padding:40px; position: absolute; border: 1px solid black; background-color: yellow; transform: rotateY(80deg); transform-origin:40% 90% 10px; -webkit-transform: rotateY(80deg); -webkit-transform-origin:40% 90% 10px; -moz-transform: rotateY(80deg); -moz-transform-origin:40% 90% 10px; -o-transform: rotateY(80deg); -o-transform-origin:40% 90% 10px; } --> </style> <script type="text/javascript"> function changeRot(value) { document.getElementById('div2').style.transform="rotateY(" + value + "deg)"; document.getElementById('div2').style.webkitTransform="rotateY(" + value + "deg)"; document.getElementById('div2').style.MozTransform="rotateY(" + value + "deg)"; document.getElementById('div2').style.OTransform="rotateY(" + value + "deg)"; document.getElementById('persp').innerHTML=value + "deg"; } function checkFlat() { if (document.getElementById("tf").checked==true) { document.getElementById('div2').style.webkitTransformStyle="preserve-3d"; } else { document.getElementById('div2').style.webkitTransformStyle="flat"; } } </script> </head> <body> <center> <h3>Генератор transform-style для Safari и Chrome</h3> <p>Введите значение в поле и нажмите Enter ↵ ( работает только в Safari и Chrome)</p> <br> <div id="div1"> <div id="div2">РОДИТЕЛЬ <div id="div3">ЭЛЕМЕНТ</div></div></div> webkit-transform-style: preserve-3d<input type="checkbox" onchange="checkFlat()" id="tf" ><br><br> Rotate:<br> <input type="range" min="-360" max="360" value="70" onchange="changeRot(this.value)"><br> -webkit-transform: rotateY:(<span id="persp">70deg</span>); </center> </body> </html> Пример в действииИсточники: http://delaisait.ucoz.ru/ | |||||||||||
Поделись ссылкой на эту страницу с друзьями:
| |||||||||||
| Просмотров: 693 | Рейтинг: 0.0/0 | |||||||||||
