Свойство perspective задаёт, насколько пикселей удалён 3D-элемент от точки обзора – и вот тут начинается настоящая магия! Это свойство позволяет изменить перспективу, с которой вы видите 3D элементы. Учтите: при применении perspective к элементу именно его потомки обретают перспективный вид – сам контейнер остаётся «плоским». Это свойство влияет только на 3D-трансформированные элементы, придавая им глубину и реализм. Не забывайте использовать его вместе со свойством perspective-origin, которое позволяет менять положение точки начала перспективы – добавьте ещё одну степень контроля над 3D-миром! | Значение по умолчанию: | none | | Наследуется: | нет | | Версия: | CSS3 | | Синтаксис JavaScript: | object.style.perspective = 500; | | Значение | Описание | | число | Указывает, на сколько пикселей элемент удалён от точки обзора. | | none | То же самое, что и 0. Перспектива не установлена. | Пример htmlhead style type="text/css" #div1 { height: 150px; width: 150px; margin: 50px; padding: 10px; border: 1px solid black; perspective: 150; -webkit-perspective: 150; /* Safari и Chrome */ } #div2 { padding: 50px; border: 1px solid black; background-color: red; transform: rotateX(45deg); -webkit-transform: rotateX(45deg); /* Safari и Chrome */ } /style/headbody pДанный пример будет работать только в браузерах Chrome и Safari/p div id="div1" HELLO /body/html
|