w3docs logo

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

Свойство perspective-origin определяет позицию, с которой пользователь смотрит на 3D-позиционированный элемент.

Свойство perspective использует значение свойства perspective-origin как точку схода.

Perspective-originвсегда используется вместе со свойством perspective.

Только дочерний элемент имеет вид в перспективе.

Для максимальной совместимости браузера данное свойство используется с расширением -webkit-.

Значение по умолчанию 50% 50%
Применяется К трансформируемым элементам.
Наследуется Нет
Анимируемое Да. Трансформация перспективы анимируема.
Версия CSS3
DOM синтаксис object.style.perspectiveOrigin = "20px 70%";

Синтаксис

perspective-origin: x-position y-position | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .element1 {
      position: relative;
      height: 150px;
      width: 150px;
      margin-left: 60px;
      border: 1px solid #666;
      -webkit-perspective: 130px; /* Safari 4-8  */
      -webkit-perspective-origin: 50% 50%; /* Safari 4-8  */  
      perspective: 130px;
      perspective-origin: 50% 50%;  
      }
      .element2 {
      padding: 50px;
      position: absolute;
      border: 1px solid #000;
      background-color: #1c87c9;
      background: #8ebf42; 
      -webkit-transform-style: preserve-3d; /* Safari 3-8  */  
      -webkit-transform: rotateX(45deg); /* Safari 3-8  */
      transform-style: preserve-3d;
      transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства perspective-origin</h2>
    <h3>Perspective-origin: 50% 50%:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>

Рассмотрим пример со значением "left":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .element1 {
      position: relative;
      height: 150px;
      width: 150px;
      margin-left: 20px;
      border: 1px solid #666;
      -webkit-perspective: 80px; /* Safari 4-8  */
      -webkit-perspective-origin: left; /* Safari 4-8  */  
      perspective: 80px;
      perspective-origin: left;  
      }
      .element2 {
      padding: 50px;
      position: absolute;
      border: 1px solid #000;
      background-color: #1c87c9;
      background: #8ebf42; 
      -webkit-transform-style: preserve-3d; /* Safari 3-8  */  
      -webkit-transform: rotateX(45deg); /* Safari 3-8  */
      transform-style: preserve-3d;
      transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства perspective-origin</h2>
    <h3>Perspective-origin: left:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>

Пример, где для свойства perspective-origin указано значение "right":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .element1 {
      position: relative;
      height: 150px;
      width: 150px;
      margin-left: 160px;
      border: 1px solid #666;
      -webkit-perspective: 80px; /* Safari 4-8  */
      -webkit-perspective-origin: right; /* Safari 4-8  */  
      perspective: 80px;
      perspective-origin: right;  
      }
      .element2 {
      padding: 50px;
      position: absolute;
      border: 1px solid #000;
      background-color: #1c87c9;
      background: #8ebf42; 
      -webkit-transform-style: preserve-3d; /* Safari 3-8  */  
      -webkit-transform: rotateX(45deg); /* Safari 3-8  */
      transform-style: preserve-3d;
      transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства perspective-origin</h2>
    <h3>Perspective-origin: right:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>

Пример с указанным значением "bottom right":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .element1 {
      position: relative;
      height: 150px;
      width: 150px;
      margin-left: 60px;
      border: 1px solid #666;
      -webkit-perspective: 130px; /* Safari 4-8  */
      -webkit-perspective-origin: bottom right; /* Safari 4-8  */  
      perspective: 130px;
      perspective-origin: bottom right;  
      }
      .element2 {
      padding: 50px;
      position: absolute;
      border: 1px solid #000;
      background-color: #1c87c9;
      background: #8ebf42; 
      -webkit-transform-style: preserve-3d; /* Safari 3-8  */  
      -webkit-transform: rotateX(45deg); /* Safari 3-8  */
      transform-style: preserve-3d;
      transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства perspective-origin</h2>
    <h3>Perspective-origin: bottom right:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>

Значения

Значение Описание
x-position Указывает положение на оси x. Может иметь следующие значения:
  • left,
  • right,
  • center,
  • length,
  • percentage.
y-position Указывает положение на оси y. Может иметь следующие значения:
  • top,
  • center,
  • bottom,
  • length,
  • percentage.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome firefox safari opera
36.0+
12.0-35.0 -webkit- 		16.0+
10.0-15.0 -moz- 		4.0+
-webkit- 		23.0+
15.0-22.0 -webkit-

Практикуйте свои знания

Что такое CSS свойство 'perspective-origin'?
Считаете ли это полезным?