Главная » Все материалы сайта » Справочник CSS-3 » Трансформация |
perspective | Свойство CSS
perspectiveСвойство perspective устанавливает глубину видимых элементов из разных точек в 3D пространстве, при этом создаётся эффект удаления и приближения вложенных элементов. На момент создания статьи не поддерживалось не одним браузером, за исключением Safari и Chrome с применением альтернативного свойства -webkit-perspective. Это свойство должно применяться совместно со свойством transform-style и префиксами (альтернативными свойствами) к нему. Свойство применимо к блочным и строчным элементам, создано в версии CSS3 и проходит валидацию согласно версии CSS3. Дополнительные свойства, применяемые к perspective
Дополнительные значения, применяемые к perspective
Свойство работает в браузерахПример применения свойства<!DOCTYPE html>
<html lang="ru"> <head> <title>Генератор свойства perspective для 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; } </script> </head> <body onload="changePersp(200);updateOrigPerpective()"> <center> <h3>Генератор свойства perspective для Safari и Chrome</h3> <p>Введите значение в поле и нажмите Enter ↵ ( работает только в Safari и Chrome)</p> <br> <div id="div1"> <div id="div2">ЭЛЕМЕНТ</div></div> Change perspective:<br> <input type="range" min="45" max="2000" value="200" onchange="changePersp(this.value)"><br> -webkit-perspective: <span id="persp"></span>; </center> </body> </html> Пример в действииИсточники: http://delaisait.ucoz.ru/ | |||||||||||
Поделись ссылкой на эту страницу с друзьями:
| |||||||||||
Категория: Трансформация | Добавил: evkuriy (05.07.2013) | |||||||||||
Просмотров: 662 | Рейтинг: 0.0/0 |