W3docs
ru
Войти

Свойство CSS perspective

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

Свойство perspective определяет, насколько далеко наблюдатель расположен от плоскости z = 0 трёхмерных дочерних элементов. Проще говоря, оно управляет силой 3D-эффекта: превращает плоское вращение в нечто, уходящее вглубь экрана — так же, как объекты уменьшаются по мере удаления от глаза в реальной жизни.

Свойство задаётся на родительском элементе. Значение — это смоделированное расстояние от наблюдателя до экрана. Малые значения (например, 100px) помещают наблюдателя очень близко, и перспектива получается выразительной и преувеличенной. Большие значения (например, 1000px) удаляют наблюдателя, и эффект становится мягким и почти плоским. На этой странице объясняется поведение свойства и показывается разница между none и реальной длиной.

Поскольку дочерний элемент находится в 3D-пространстве, его части с z > 0 ближе к наблюдателю и выглядят крупнее, а части с z < 0 дальше и выглядят меньше.

Когда это использовать?

Свойство perspective применяется при вращении элемента в 3D (с помощью transform: rotateX(), rotateY() или translateZ()), когда нужно, чтобы это вращение выглядело как настоящая глубина, а не плоская деформация. Типичные случаи: перекидные карточки, 3D-кубы и карусели, а также эффекты наклона при наведении.

Свойство perspective принимает единственное значение <length>. Ноль допустим (он отключает эффект, как none), отрицательные значения не разрешены — они считаются недопустимыми и игнорируются.

Чтобы управлять положением точки схода (позицией, в которую смотрит наблюдатель), используйте это свойство вместе с perspective-origin. Для самих 3D-вращений см. свойство transform, а чтобы вложенные дочерние элементы оставались в едином 3D-пространстве, используйте transform-style.

Свойство perspective является одним из свойств CSS3.

Информация

Свойство perspective и функция трансформации perspective(). Свойство perspective не влияет на элемент, на котором оно задано — оно применяет перспективное преобразование только к 3D-трансформированным дочерним элементам. Значение perspective(), используемое внутри свойства transform, применяет глубину непосредственно к самому элементу. Используйте свойство, когда несколько дочерних элементов должны разделять одну позицию наблюдателя; используйте функцию, когда отдельному элементу нужна собственная глубина.

Информация

Современные браузеры полностью поддерживают это свойство без вендорных префиксов.

Initial Valuenone
Applies toTransformable elements.
InheritedNo.
AnimatableYes. The transformation of the perspective is animatable.
VersionCSS3
DOM Syntaxobject.style.perspective = "70px";

Синтаксис

Синтаксис CSS perspective

perspective: length | none | initial | inherit;

Пример без перспективы (perspective: none)

При perspective: none на родителе rotateX(40deg) дочернего элемента отображается как плоская 2D-деформация — ощущения глубины нет. Это базовое состояние для сравнения.

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

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

Результат

CSS perspective with px

Пример с perspective: 100px

Теперь родительский элемент получает perspective равное 100px. Поскольку наблюдатель моделируется как очень близкий, тот же rotateX(40deg) на дочернем элементе воспринимается как настоящая глубина — верхний край уходит в глубину экрана, и блок выглядит наклонённым в 3D-пространстве. Попробуйте увеличить значение до 500px или 1000px — наклон станет более мягким.

Пример CSS perspective с пикселями

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

Значения

ЗначениеОписание
lengthПрименяет перспективное преобразование к элементу и его содержимому.
noneНе применяет перспективного преобразования.
initialУстанавливает значение свойства по умолчанию.
inheritНаследует свойство от родительского элемента.

Частые ошибки

  • Задавайте свойство на родителе, а не на вращаемом элементе. Распространённая ошибка — поставить perspective на тот же элемент, который вы вращаете. Это не даёт никакого эффекта. Либо перенесите его на родительский элемент, либо используйте функцию perspective() внутри transform на самом элементе.
  • Порядок важен при использовании функции perspective(). При использовании функции записывайте её первой: transform: perspective(500px) rotateX(40deg). Если указать её после вращения, она применится к уже повёрнутой системе координат, и результат изменится.
  • Вложенный 3D требует transform-style: preserve-3d. Без него (по умолчанию используется flat) внуки сглаживаются в плоскость родителя и глубина теряется.

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

  • perspective-origin — задаёт положение точки схода.
  • transform — применяет 3D-вращения и трансляции, которым perspective придаёт глубину.
  • transform-style — удерживает вложенные элементы в едином 3D-пространстве.
  • backface-visibility — скрывает обратную сторону элемента, когда он повёрнут от наблюдателя.

Практика

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