CSS-свойство perspective-origin

CSS-свойство perspective-origin определяет координаты начальной точки от которой высчитывается свойство perspective. Свойство устанавливает положение X и Y для того, чтобы установить угол, под которым зритель будет смотреть на элемент.

Значение по умолчанию:	`50% 50%`
Применяется к:	Трансформируемые элементы
Наследование:	Нет
Анимирование:	Да. Анимируемые свойства
Версия:	Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

perspective-origin: [ x-position y-position ] | initial | inherit

Если для свойства perspective-origin указано только одно значение, предполагается, что второе значение будет center, что равно значению 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); /* Standard syntax */
}

Если хотя бы одно из двух значений не является ключевым словом, то первое значение представляет горизонтальную позицию (или смещение), а второе значение представляет вертикальную позицию (или смещение) исходного положения.

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение	Описание
x-position	Представляет горизонтальное положение (или смещение) исходного положения. Может принимать одно из следующих значений: percentage — Определяет процентное смещение относительно ширины элемента; length — Определяет точное значение смещения относительно ширины элемента; `left` — Равно 0% ширины, самая левая точка элемента; `center` — Равно 50% ширины, центральная точка элемента; `right` — Равно 100% ширины, самая правая точка элемента.
y-position	Представляет вертикальную позицию (или смещение) исходного положения. Может принимать одно из следующих значений: percentage — Определяет процентное смещение относительно высоты элемента; length — Определяет точное значение смещения относительно высоты элемента; `top` — Равно 0% высоты, самая верхняя точка элемента; `center` — Равно 50% высоты, середина элемента; `bottom` — Равно 100% высоты, самая нижняя точка элемента.
`initial`	Устанавливает это свойство в значение по умолчанию.
`inherit`	Если указан, связанный элемент принимает вычисленное значение своего родительского элемента `perspective-origin`.