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