свойство perspective-originCSS3-генератор ☛

Задаёт координаты точки, куда смотрит наблюдатель. Это свойство работает совместно с perspective и определяет точку сходимости линий при перспективе.

Краткая информация

Значение по умолчанию	50% 50%
Наследуется	Нет
Применяется	К трансформируемым элементам
Анимируется	Да

Синтаксис ?

[ <проценты> | <размер> | left | center | right | top | bottom] |
[[ <проценты> | <размер> | left | center | right ] && [ <проценты> | <размер> | top | center | bottom ]]

✖

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

Если указано только одно значение, то оно считается координатой X, два значения определяют вначале координату X, затем Y, при этом ключевые слова могут идти в произвольном порядке. Проценты задаются относительно ширины элемента, отсчёт координат начинается с его левого верхнего угла. Проценты, пиксели и другие единицы CSS могут быть отрицательными. Ниже приведено, как связаны между собой процентная запись и ключевые слова.

left = left center = 0 50% — центр левого края.
center = center center = 50% 50% — центральная точка.
right = right center = 100% 50% — центр правого края.
top = center top = 50% 0 — центр верхнего края.
bottom = center bottom 50% 100% — центр нижнего края
left top = 0 0 — левый верхний угол.
left bottom = 0 100% — левый нижний угол.
right top = 100% 0 — правый верхний угол.
right bottom = 100% 100% — правый нижний угол.

Объектная модель

Объект.style.perspectiveOrigin

Примечание

Браузеры Chrome, Safari, Opera, Android понимают свойство -webkit-perspective-origin.

Firefox до версии 16 понимает свойство -moz-perspective-origin.

Браузеры: Настольные Мобильные ?

Internet Explorer	Chrome	Opera	Safari	Firefox
10	12	15	6	10	16

Android	Firefox Mobile		Opera Mobile	Safari Mobile
3	10	16	15	6

✖

Браузеры

В таблице браузеров применяются следующие обозначения.

— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Трансформация

См. также