W3docs
ru
Войти

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

Используйте CSS-свойство perspective-origin, чтобы задать точку обзора 3D-элемента. Значения свойства и примеры.

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

Как это работает

Для корректного отображения 3D-сцены необходимы два компонента:

  1. Свойство perspective, определяющее силу 3D-эффекта (чем меньше значение, тем выраженнее перспективное сокращение).
  2. Свойство perspective-origin, определяющее положение камеры. perspective задаёт глубину точки схода, а perspective-origin — её горизонтальное и вертикальное положение.

По умолчанию точка схода находится точно в центре элемента (50% 50%), поэтому повёрнутая дочерняя грань выглядит симметрично. Смещение perspective-origin в сторону похоже на обход объекта — один и тот же дочерний элемент будет казаться просматриваемым слева, справа, сверху или снизу.

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

Синтаксис из двух значений всегда задаётся в порядке сначала горизонталь, затем вертикаль (например, perspective-origin: 25% 75%). Если указано одно значение, второе по умолчанию принимает значение center. Пары ключевых слов, такие как top left, являются исключением — ключевые слова можно писать в любом порядке, поскольку каждое ключевое слово указывает конкретную ось.

Информация

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

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

Синтаксис

Синтаксис CSS perspective-origin

perspective-origin: x-position y-position | x | y | closest-side | farthest-side | initial | inherit;

Пример свойства perspective-origin:

Пример кода CSS perspective-origin

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element1 {
        position: relative;
        height: 150px;
        width: 150px;
        margin-left: 60px;
        border: 1px solid #666;
        perspective: 130px;
        perspective-origin: 50% 50%;
      }
      .element2 {
        padding: 50px;
        position: absolute;
        border: 1px solid #000;
        background: #8ebf42;
        transform-style: preserve-3d;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Perspective-origin property example</h2>
    <h3>Perspective-origin: 50% 50%:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>
Попробуйте сами »

Результат

CSS perspective-origin по центру (50% 50%)

При значении по умолчанию 50% 50% точка схода находится по центру, поэтому повёрнутый Box2 выглядит равномерно сжатым. В следующих примерах мы сдвигаем эту точку к одному из краёв и наблюдаем, как меняется кажущийся угол обзора.

Пример свойства perspective-origin со значением "left":

Пример CSS perspective-origin со значением left

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element1 {
        position: relative;
        height: 150px;
        width: 150px;
        margin-left: 20px;
        border: 1px solid #666;
        perspective: 80px;
        perspective-origin: left;
      }
      .element2 {
        padding: 50px;
        position: absolute;
        border: 1px solid #000;
        background: #8ebf42;
        transform-style: preserve-3d;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Perspective-origin property example</h2>
    <h3>Perspective-origin: left:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>
Попробуйте сами »

Пример свойства perspective-origin со значением "right":

Пример CSS perspective-origin со значением right

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element1 {
        position: relative;
        height: 150px;
        width: 150px;
        margin-left: 160px;
        border: 1px solid #666;
        perspective: 80px;
        perspective-origin: right;
      }
      .element2 {
        padding: 50px;
        position: absolute;
        border: 1px solid #000;
        background: #8ebf42;
        transform-style: preserve-3d;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Perspective-origin property example</h2>
    <h3>Perspective-origin: right:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>
Попробуйте сами »

Пример свойства perspective-origin со значением "bottom right":

Пример CSS perspective-origin bottom

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element1 {
        position: relative;
        height: 150px;
        width: 150px;
        margin-left: 60px;
        border: 1px solid #666;
        perspective: 130px;
        perspective-origin: bottom right;
      }
      .element2 {
        padding: 50px;
        position: absolute;
        border: 1px solid #000;
        background: #8ebf42;
        transform-style: preserve-3d;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Perspective-origin property example</h2>
    <h3>Perspective-origin: bottom right:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>
Попробуйте сами »

Значения

ЗначениеОписание
x-positionГоризонтальное положение точки схода. Принимает <length>, процент или одно из ключевых слов: left (= 0), center (= 50%) или right (= 100%).
y-positionВертикальное положение точки схода. Принимает <length>, процент или одно из ключевых слов: top (= 0), center (= 50%) или bottom (= 100%).
initialУстанавливает для свойства значение по умолчанию (50% 50%).
inheritНаследует значение свойства от родительского элемента.

Процентные и длинные значения разрешаются относительно собственного блока элемента, с началом координат в левом верхнем углу. Таким образом, 0 0 помещает точку схода в левый верхний угол, 100% 100% — в правый нижний; допускаются отрицательные значения и значения больше 100%, выводящие камеру за пределы блока.

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

perspective-origin поддерживается во всех современных браузерах. Использование вендорных префиксов, таких как -webkit-perspective-origin, для актуальных версий Chrome, Edge, Firefox и Safari больше не требуется.

Связанные свойства

  • perspective — задаёт расстояние до точки схода и обязательно для того, чтобы perspective-origin имело какой-либо эффект.
  • transform — применяет трансформации rotateX, rotateY и translateZ, к которым применяется перспектива.
  • transform-style — используйте preserve-3d, чтобы вложенные дочерние элементы сохраняли свои 3D-позиции в рамках перспективы.
  • backface-visibility — управляет отображением обратной стороны повёрнутого элемента.

Практика

Практика
Что делает CSS-свойство 'perspective-origin'?
Что делает CSS-свойство 'perspective-origin'?
Was this page helpful?