CSS perspective Свойство
Пример
Присвойте элементу с трехмерным позиционированием некоторую перспективу:
#div1
{
-webkit-perspective: 100px; /* Safari 4-8 */
perspective: 100px;
}
Подробнее примеры ниже.
Определение и использование
Свойство perspective используется для придать элементу с трехмерным позиционированием некоторую перспективу.
Свойство perspective определяет, насколько объект находится вдали от пользователя.
Таким образом, более низкое значение приведет к более интенсивному трехмерному эффекту, чем более высокое значение.
При определении свойства perspective для элемента, это дочерние элементы, которые получают представление перспективы, а не сам элемент.
Совет: Также посмотрите на свойство perspective-origin, которое определяет, в каком положении пользователь смотрит на трехмерный объект.
Чтобы лучше понять свойство "Перспектива", Просмотрите демонстрацию.
| Значение по умолчанию: | none |
|---|---|
| Inherited: | no |
| Animatable: | yes. Читайте о animatable |
| Version: | CSS3 |
| Синтаксис JavaScript: | object.style.perspective="50px" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номера followed by -webkit- or -moz- Укажат первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| 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 | Описание |
|---|---|
| length | Как далеко находится элемент от вида |
| none | Значение по умолчанию. То же, что и 0. Перспектива не задана |
| initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) |
| inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Другие примеры
Пример
Создайте куб и задайте различные точки зрения:
.ex1 {
perspective: 800px;
}
.ex2 {
perspective: 150px;
}
Похожие страницы
CSS Справочник: CSS 3D Transforms
HTML DOM Справочник: perspective Свойство