English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Атрибут perspective-origin определяет оси X и Y, на которых основывается 3D-элемент. Этот атрибут позволяет изменить положение нижней части 3D-элемента. При определении perspective-Origin это свойство является подэлементом элемента, а не элементом himself.
В таблице приведены примеры использования и история версий этого свойства, а также грамматика использования в скриптах JavaScript.
| Значение по умолчанию: | 50P% |
|---|---|
| Применяется к: | Деформируемые элементы |
| Инherit: | Нет |
| Анимируемо: | Да.См. также Анимационные свойства. |
| Версия: | Новая функция CSS3 |
| JavaScript грамматика: | объект.style.perspectiveOrigin="20%" |
Грамматика этого свойства такая:
perspective-origin: [ x-position y-position ] | initial | inherit
Примечание:Если для атрибута perspective-origin указан только один значений, то второй значений предполагается центром, равным значению 50%.
Ниже приведен пример того, как использовать атрибут perspective-origin.
.container{
width: 125px;
height: 125px;
perspective: 300px;
perspective-origin: 20% top;
border: 4px solid #a2b058;
background: #f0f5d8;
}
.transformed {
-webkit-transform: rotate3d(0, 1, 0, 60deg); /* Chrome, Safari, Opera */
transform: rotate3d(0, 1, 0, 60deg);
}Протестируйте, посмотрите < / >Примечание:Если по крайней мере один из двух значений не является ключевым словом, то первое значение указывает на горизонтальное положение (или смещение) точки透视, второе значение указывает на вертикальное положение (или смещение) точки透视.
В таблице ниже описаны значения этого свойства.
| Значение | Описание |
|---|---|
| x-axis | 表示透视原点的 горизонтальное положение (или смещение). Может иметь одно из следующих значений:
|
| y-axis | 表示透视原点的垂直位置 (или смещение). Может иметь одно из следующих значений:
|
| initial | Установить этот параметр в его значение по умолчанию. |
| inherit | Если указано, то связанный элемент принимает значение свойства perspective-origin родительского элемента. |
Совместимость браузеров для свойства perspective-origin, числа в таблице ниже показывают минимальную версию браузера, поддерживающего это свойство; все основные браузеры поддерживают это свойство.
|
Узнайте больше из следующих руководств:CSS3 3D-трансформации.
Связанные свойства:perspective,backface-visibility,transform,transform-origin,transform-style.