Свойство perspective определяет, на сколько пикселей удален 3D элемент от точки обзора. Это свойство позволяет изменять перспективу, откуда просматриваются 3D элементы.
При определении свойства perspective для элемента, перспективный вид получают именно дочерние элементы, а не сам элемент.
Свойство perspective воздействует только на 3D трансформированные элементы.
Используйте это свойство вместе со свойством perspective-origin, которое позволяет изменять нижнее положение 3D элементов.
| Значение по умолчанию: |
none |
| Наследуется: |
нет |
| Версия: |
CSS3 |
| Синтаксис JavaScript: |
object.style.perspective=500 |
| Значение |
Описание |
| число |
Указывает на сколько пикселей элемент удален от точки обзора. |
| none |
То же самое, что и 0. Перспектива не установлена. |
Пример
html
head
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
/head
body
pДанный пример будет работать только в браузерах Chrome и Safari/p
div id="div1"
div id="div2"HELLO/div
/div
/body
/html
|