Свойство перспективы CSS
Пример
Придайте 3D-позиционированному элементу некоторую перспективу:
#div1
{
perspective: 100px;
}
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Свойство perspective
используется для придания трехмерному элементу некоторой перспективы.
Свойство perspective
определяет, насколько далеко объект находится от пользователя. Таким образом, более низкое значение приведет к более интенсивному 3D-эффекту, чем более высокое значение.
При определении perspective
свойства элемента вид в перспективе получают дочерние элементы, а НЕ сам элемент.
Совет: Также обратите внимание на свойство « проекция-происхождение », которое определяет, в какой позиции пользователь смотрит на 3D-объект.
Чтобы лучше понять свойство перспективы, просмотрите демонстрацию .
Значение по умолчанию: | никто |
---|---|
Унаследовано: | нет |
Анимация: | да. Читать об анимации |
Версия: | CSS3 |
Синтаксис JavaScript: | объект .style.perspective="50px" |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следует -webkit- или -moz-, указывают первую версию, которая работала с префиксом.
Property | |||||
---|---|---|---|---|---|
perspective | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0.3 -webkit- |
23.0 15.0 -webkit- |
Синтаксис CSS
perspective: length|none;
Значения свойств
Property Value | Description |
---|---|
length | How far the element is placed from the view |
none | Default value. Same as 0. The perspective is not set |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Дополнительные примеры
Пример
Создайте куб и установите разные перспективы:
.ex1 {
perspective: 800px;
}
.ex2 {
perspective: 150px;
}
Связанные страницы
Учебное пособие по CSS: 3D-преобразования CSS
Справочник по HTML DOM: свойство перспективы