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

perspective — это свойство CSS, которое определяет расстояние между плоскостью z=0 и пользователем, чтобы придать элементу с 3D-позиционированием перспективу.

Попробуйте

perspective: none;

perspective: 800px;

perspective: 23rem;

perspective: 5.5cm;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </div>
</section>

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 800px;
  perspective-origin: 150% 150%;
}

#example-element {
  width: 100px;
  height: 100px;
  perspective: 550px;
  transform-style: preserve-3d;
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: white;
}

.front {
  background: rgb(90 90 90 / 0.7);
  transform: translateZ(50px);
}

.back {
  background: rgb(0 210 0 / 0.7);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgb(210 0 0 / 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgb(0 0 210 / 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgb(210 210 0 / 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgb(210 0 210 / 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

Синтаксис

/* Keyword value */
perspective: none;

/* <length> values */
perspective: 20px;
perspective: 3.5em;

/* Global values */
perspective: inherit;
perspective: initial;
perspective: revert;
perspective: revert-layer;
perspective: unset;

Значения

none

Указывает, что преобразование перспективы не применяется.

<length>

<length>, задающее расстояние от пользователя до плоскости z=0. Оно используется для применения преобразования перспективы к дочерним элементам. Отрицательные значения являются синтаксическими ошибками. Если значение меньше 1px, оно ограничивается значением 1px.

Описание

Каждый 3D-элемент с z>0 становится больше; каждый 3D-элемент с z<0 становится меньше. Сила эффекта определяется значением этого свойства. Большие значения perspective вызывают небольшое преобразование; малые значения perspective вызывают большое преобразование.

Части 3D-элементов, находящиеся позади пользователя — то есть имеющие координаты по оси z больше значения свойства CSS perspective, — не отображаются.

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

Использование этого свойства со значением, отличным от none, создаёт новый контекст наложения. Кроме того, в этом случае объект будет выступать в качестве содержащего блока для вложенных в него элементов position: fixed.

Формальное определение

Формальный синтаксис

perspective = 
  none |
  <length>

Примеры

Настройка перспективы

Пример того, как меняется куб при установке perspective в разных положениях, приведён в разделе Использование CSS-преобразований > Настройка перспективы.

Спецификации

Совместимость с браузерами

См. также

• Использование CSS-преобразований