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

Свойство perspective-origin определяет, где располагается 3D элемент на осях x и y. Это свойство позволяет изменять нижнее положение 3D элементов.

При указании свойства perspective-origin для элемента, позиционируются именно его дочерние элементы, а не сам элемент.

Это свойство используется вместе со свойством perspective и воздействует только на трансформированные 3D элементы!

CSS синтаксис

perspective-origin: x-ось y-ось | initial | inherit;

Возможные значения

ЗначениеОписание
x-ось

Определяет расположение на оси x.

Возможные значения:

  • left
  • center
  • right
  • расстояние (указывается в единицах измерения CSS)
  • %

Значение по умолчанию: 50%

y-ось

Определяет расположение на оси y.

Возможные значения:

  • top
  • center
  • bottom
  • расстояние (указывается в единицах измерения CSS)
  • %

Значение по умолчанию: 50%

inheritЗначение наследуется от родительского элемента.
initialУстанавливает значение по умолчанию.

Пример использования

Устанавливаем базовое расположение 3D элемента


div {
     -webkit-perspective: 150px; /* Chrome, Safari, Opera */
     -webkit-perspective-origin: 10% 10%; /* Chrome, Safari, Opera */
     perspective: 150px;
     perspective-origin: 10% 10%;
}