perspective-origin

Свойство perspective-origin определяет точку схода 3D-пространства, созданного при помощи свойства perspective. Оно задаёт, откуда происходит наблюдение за элементом в 3D-пространстве, словно определяет положение камеры в сцене.

Наблюдатель смотрит из центра по горизонтали и снизу по вертикали:

        
          
          .element {  perspective: 500px;  perspective-origin: 50% 100%;}
          .element {
  perspective: 500px;
  perspective-origin: 50% 100%;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Можно указать одно или два значения в любых доступных единицах измерения. Если указано одно значение, оно воспринимается как точка на оси x. Если указано два значения, первое относится к оси x, а второе к оси y.

Отсчёт начинается от верхнего левого угла элемента:

• значение 0 0 означает, что наблюдатель смотрит с верхнего левого угла;
• значение 100% 100% задаёт позицию наблюдателя в правом нижнем углу.

Вместо чисел можно использовать ключевые слова и их комбинации: top, bottom, left, right, center.

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

perspective-origin работает вместе с perspective для создания 3D-эффектов. Без perspective это свойство не имеет смысла. Оно не влияет на 2D-пространство и применяется только в сочетании с другими 3D-трансформациями, например, rotate3d, translate3d, и scale3d.

Важно не путать perspective-origin с transform-origin. В то время как perspective-origin управляет точкой обзора наблюдателя, transform-origin задаёт центр трансформации самого элемента. Эти два свойства могут работать совместно для создания сложных 3D-анимаций.

💡 Используйте проценты для гибкого позиционирования точки зрения. Это позволит сохранить пропорции, если размер элемента изменится.