СSS Свойство 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 для элемента, это дочерние элементы, которые получат эффект, а не сам элемент.
Примечание: Это свойство должно использоваться в сочетании с perspective!
Чтобы лучше понять свойство perspective-origin, просмотр демо-версии.
| Значение по умолчанию: | 50% 50% |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | да Прочитайте о animatable Попробовать |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.perspectiveOrigin="10px 50%" Попробовать |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Числа, за которыми следует -webkit - или -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;
Значение свойств
| Значение | Описание |
|---|---|
| x-axis | Определение места расположения вида на оси x Возможное значение:
Значение по умолчанию: 50% |
| y-axis | Определение места расположения вида на оси y Возможное значение:
Значение по умолчанию: 50% |
| initial | Устанавливает для этого свойства значение по умолчанию. Прочитайте о initial |
| inherit | Наследует это свойство от родительского элемента. Прочитайте о inherit |
Связанные страницы
CSS Учебник: CSS 3D Трансформация
HTML DOM Справочник: Свойство perspectiveOrigin
