CSS perspective-origin Свойство
Пример
Определите, с какого положения пользователь смотрит на 3D-позиционный элемент:
#div1
{
-webkit-perspective: 100px; /* Safari 4-8 */
-webkit-perspective-origin: left; /* Safari 4-8 */
perspective: 100px;
perspective-origin: left;
}
Определение и использование
Свойство perspective-origin
определяет позицию, с которой пользователь смотрит на 3D-позиционный элемент.
При определении свойства perspective-origin
для элемента, это дочерние элементы, которые получат эффект, а не сам элемент.
Примечание: Это свойство должно использоваться совместно с свойством перспектива!
Чтобы лучше понять свойство перспективы-Origin, Просмотрите демонстрацию.
Значение по умолчанию: | 50% 50% |
---|---|
Inherited: | no |
Animatable: | yes. Читайте о animatable |
Version: | CSS3 |
Синтаксис JavaScript: | object.style.perspectiveOrigin="10px 50%" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номера followed by -webkit- or -moz- Укажат первую версию, которая работала с префиксом.
Свойство | |||||
---|---|---|---|---|---|
perspective-origin | 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-origin: x-axis y-axis|initial|inherit;
Значения свойств
Property Value | Описание |
---|---|
x-axis | Определение места размещения вида на оси x Возможные значения: |
y-axis | Определение места размещения вида на оси y Возможные значения: |
initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) |
inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Похожие страницы
CSS Справочник: CSS 3D Transforms
HTML DOM Справочник: perspectiveOrigin Свойство