Главная » Все материалы сайта » Справочник CSS-3 » Трансформация |
perspective-origin | Свойство CSS
perspective-originСвойство perspective-origin устанавливает глубину видимых элементов из разных осевых точек наблюдателя, то есть наблюдатель может взлянуть на вложенные элементы из разных точек. На момент создания статьи свойство не поддерживалось ни одним браузером, за исключением Safari и Chrome, поддерживающими альтернативное свойство -webkit-perspective-origin. Это свойство должно применяться совместно со свойством perspective и префиксами (альтернативными свойствами) к нему. Свойство применимо к блочным и строчным элементам, создано в версии CSS3 и проходит валидацию согласно версии CSS3. Дополнительные свойства применяемые к perspective-origin
Дополнительные значения применяемые к perspective-origin
Свойство работает в браузерахПример применения свойства<!DOCTYPE html>
<html lang="ru"> <head> <title>Генератор свойства perspective-origin для 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: rotateX(45deg); -webkit-transform: rotateX(45deg); } --> </style> <script type="text/javascript"> function changePersp(value) { document.getElementById('div1').style.webkitPerspective=value; document.getElementById('persp').innerHTML=value; } function changeOrgPersp() { var x=document.getElementById('operspx').value; var y=document.getElementById('operspy').value; document.getElementById('div1').style.webkitPerspectiveOrigin=x + '% ' + y + '%'; document.getElementById('opersp').innerHTML=x + "% " + y + "%"; } </script> </head> <body onload="changePersp(200);updateOrigPerpective()"> <center> <h3>Генератор свойства perspective-origin для Safari и Chrome</h3> <p>Введите значение в поле и нажмите Enter ↵ ( работает только в Safari и Chrome)</p> <div id="div1"> <div id="div2">Элемент</div></div> Change perspective:<br> <input type="range" min="45" max="5000" value="200" onchange="changePersp(this.value)"><br> webkit-perspective: <span id="persp">200</span>;<br><br> Change the Origins:<br> X-axis:<input type="range" min="-100" max="200" value="50" onchange="changeOrgPersp()" id="operspx"><br> Y-axis:<input type="range" min="-100" max="200" value="50" onchange="changeOrgPersp()" id="operspy"><br> webkit-perspective-origin: <span id="opersp">50% 50%</span>; </center> </body> </html> Пример в действииИсточники: http://delaisait.ucoz.ru/ | |||||||||||||||||||||
Поделись ссылкой на эту страницу с друзьями:
| |||||||||||||||||||||
Категория: Трансформация | Добавил: evkuriy (05.07.2013) | |||||||||||||||||||||
Просмотров: 599 | Рейтинг: 0.0/0 |