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

Определение и применение

Свойство perspective задаёт расстояние от наблюдателя до плоскости z = 0 для трёхмерных преобразований дочерних элементов. Чем меньше положительное расстояние, тем сильнее перспективное искажение; само свойство не перемещает элемент.

Установить начало координат для свойства перспективы возможно при использовании свойства perspective-origin.

Попробуйте значения perspective

Перспектива задаётся родителю, а дочерняя карточка повёрнута по Y. Чем меньше расстояние, тем сильнее перспективное искажение.

Значение свойстваperspective: none;perspective: 200px;perspective: 500px;perspective: 1000px;

perspective: none

HTML и CSS примера

HTML

<div class="stage">
  <div class="demo-target">
    <div class="card">3D</div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  display: grid;
  place-items: center;
  padding: 20px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.demo-target {
  width: 180px;
  height: 140px;
  display: grid;
  place-items: center;
  perspective: none;
}
.card {
  width: 120px;
  height: 100px;
  display: grid;
  place-items: center;
  background: #ffe4bd;
  border: 3px solid #245a85;
  transform: rotateY(50deg);
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  display: grid;
  place-items: center;
  padding: 20px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.demo-target {
  width: 180px;
  height: 140px;
  display: grid;
  place-items: center;
  perspective: 200px;
}
.card {
  width: 120px;
  height: 100px;
  display: grid;
  place-items: center;
  background: #ffe4bd;
  border: 3px solid #245a85;
  transform: rotateY(50deg);
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  display: grid;
  place-items: center;
  padding: 20px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.demo-target {
  width: 180px;
  height: 140px;
  display: grid;
  place-items: center;
  perspective: 500px;
}
.card {
  width: 120px;
  height: 100px;
  display: grid;
  place-items: center;
  background: #ffe4bd;
  border: 3px solid #245a85;
  transform: rotateY(50deg);
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  display: grid;
  place-items: center;
  padding: 20px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.demo-target {
  width: 180px;
  height: 140px;
  display: grid;
  place-items: center;
  perspective: 1000px;
}
.card {
  width: 120px;
  height: 100px;
  display: grid;
  place-items: center;
  background: #ffe4bd;
  border: 3px solid #245a85;
  transform: rotateY(50deg);
}

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

Спецификация: CSS transforms-2

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьcss.properties.perspective
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`perspective`	✓36 Версия 36 выпущена в 2014 г. Версия 12 выпущена в 2011 г. — Префикс -webkit-	✓12 Версия 12 выпущена в 2015 г. Версия 12 выпущена в 2015 г. — Префикс -webkit-	✓16 Версия 16 выпущена в 2012 г. Версия 49 выпущена в 2016 г. — Префикс -webkit- Примечание MDN (англ.) From version 147, Firefox supports `-webkit-perspective` with unitless values for increased compatibility. Версия 10 выпущена в 2012 г. — Префикс -moz-	✓23 Версия 23 выпущена в 2014 г. Версия 15 выпущена в 2013 г. — Префикс -webkit-	✓9 Версия 9 выпущена в 2015 г. Версия 4 выпущена в 2009 г. — Префикс -webkit-	✓36 Версия 36 выпущена в 2014 г. Версия 18 выпущена в 2012 г. — Префикс -webkit-	✓16 Версия 16 выпущена в 2012 г. Версия 49 выпущена в 2016 г. — Префикс -webkit- Примечание MDN (англ.) From version 147, Firefox for Android supports `-webkit-perspective` with unitless values for increased compatibility. Версия 10 выпущена в 2012 г. — Префикс -moz-	✓24 Версия 24 выпущена в 2014 г. Версия 14 выпущена в 2013 г. — Префикс -webkit-	✓9 Версия 9 выпущена в 2015 г. Примечание MDN (англ.) In iOS 13, the `perspective` property did not function properly. The issues were fixed in iOS 14. Версия 2 выпущена в 2008 г. — Префикс -webkit-	✓3.0 Версия 3.0 выпущена в 2015 г. Версия 1.0 выпущена в 2013 г. — Префикс -webkit-	✓4.4 Версия 4.4 выпущена в 2013 г. Версия 3 выпущена в 2011 г. — Префикс -webkit-	✓9 Версия 9 выпущена в 2015 г. Примечание MDN (англ.) In iOS 13, the `perspective` property did not function properly. The issues were fixed in iOS 14. Версия 2 выпущена в 2008 г. — Префикс -webkit-
`none`	✓12	✓12	✓10	✓15	✓4	✓18	✓10	✓14	✓3.2	✓1.0	✓4.4	✓3.2

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS

perspective: none | <length [0,∞]>;

/* Глобальные значения */
perspective: initial | inherit | unset | revert | revert-layer;

| — выбор варианта; [ ] — группа, а внутри типа — допустимый диапазон; ∞ — отсутствие верхней границы.

JavaScript синтаксис:

JavaScript

element.style.perspective = "500px";

Начальное значение свойства

none.

Значения свойства

Значения perspective
Значение	Описание
`length (число)`	Указывает расстояние, на которое элемент удаляется от точки обзора.
`none`	Перспективная проекция не применяется. Это не то же самое, что нулевая длина: длины меньше `1px` при отрисовке ограничиваются до `1px`. Начальное значение.
`initial`	Устанавливает начальное значение свойства.
`inherit`	Наследует вычисленное значение свойства у родительского элемента.
`unset`	Для ненаследуемого свойства `perspective` устанавливает его начальное значение.
`revert`	Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
`revert-layer`	Сбрасывает значение свойства для текущего слоя каскада `@layer`. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

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

CSS Transforms — спецификация perspective.

Наследуется

Нет.

Анимируемое

Да, по вычисленному значению: совместимые числовые значения интерполируются плавно. Переход между несовместимыми типами или ключевыми словами может быть дискретным.

Примеры, попробуйте сами

Преобразование в пространстве

Измените 240px на 800px. Перспектива задаётся родителю, поворот — дочернему блоку.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}
.scene {
    margin: 32px;
    height: 170px;
}
.card {
    width: 120px;
    height: 110px;
    background: #c5dbea;
    border: 2px solid #35658a;
    padding: 12px;
}
.inner {
    background: #edcf99;
}

index.html