Свойство perspective - это ключ к созданию глубины в вашем интерфейсе! Оно определяет расстояние (в пикселях) от точки обзора до 3D-элемента, позволяя вам управлять тем, насколько реалистичной будет перспектива.
Важный нюанс, о котором часто забывают: когда вы применяете 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