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

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

Свойство perspective-origin задаёт положение точки схода перспективы по горизонтали и вертикали. Оно работает вместе с perspective на родителе трёхмерных элементов.

Логика работы свойства perspective-origin показана в сравнении ниже:

Одинаковый поворот дочерней плоскости: rotateY(40deg). У родителя perspective: 200px, меняется только perspective-origin.
center
50% 50%
Плоскость
left top
0% 0%
Плоскость
top
50% 0%
Плоскость
right top
100% 0%
Плоскость
right
100% 50%
Плоскость
right bottom
100% 100%
Плоскость
bottom
50% 100%
Плоскость
left bottom
0% 100%
Плоскость
left
0% 50%
Плоскость

Метка на рамке или внутри неё показывает положение точки схода. Положение родителя и угол поворота плоскости во всех вариантах одинаковы.

  1. Первое значение указывает положение на оси X. Допускается использование числовых значений длины (допустимые единицы измерения CSS), процентное соотношение или одно из следующих трех ключевых слов: left (указывает 0 % длины по оси x), center (указывает среднюю точку) или right (указывает 100 %). Может быть указано вторым значением при использовании ключевых слов. Допускаются отрицательные значения.
  2. Второе значение указывает положение на оси Y. Допускается использование числовых значений длины (допустимые единицы измерения CSS), процентное соотношение или одно из следующих трех ключевых слов: top (указывает 0 % длины по оси y), center (указывает среднюю точку) или bottom (указывает 100 %). Может быть указано первым значением при использовании ключевых слов. Допускаются отрицательные значения.

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

У родителя perspective: 300px. Меняется положение точки наблюдения относительно повёрнутой карточки.

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

perspective-origin: center

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: 300px;
  perspective-origin: center;
}
.card {
  width: 120px;
  height: 100px;
  display: grid;
  place-items: center;
  background: #ffe4bd;
  border: 3px solid #245a85;
  transform: rotateY(50deg);
}

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

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

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

Отдельные значения (4) поддерживаются не везде — смотрите таблицу.

Показать браузеры
Совместимостьcss.properties.perspective-origin
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
perspective-origin✓36✓12✓16✓23✓9✓36✓16✓24✓9✓3.0✓4.4✓9
bottom✓12✓12✓10✓15✓4✓18✓10✓14✓2✓1.0✓4.4✓2
center✓12✓12✓10✓15✓4✓18✓10✓14✓2✓1.0✓4.4✓2
left✓12✓12✓10✓15✓4✓18✓10✓14✓2✓1.0✓4.4✓2
right✓12✓12✓10✓15✓4✓18✓10✓14✓2✓1.0✓4.4✓2
top✓12✓12✓10✓15✓4✓18✓10✓14✓2✓1.0✓4.4✓2
x-end××××✓26×××✓26××✓26
x-start××××✓26×××✓26××✓26
y-end××××✓26×××✓26××✓26
y-start××××✓26×××✓26××✓26

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

CSS синтаксис:

CSS
perspective-origin: <position>;

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

JavaScript синтаксис:

JavaScript
element.style.perspectiveOrigin = "50% 50%";

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

50% 50%.

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

Значения perspective-origin
Значение Описание
x-axis Первое значение указывает положение на оси X. Допускается использование числовых значений длины (допустимые единицы измерения CSS), процентное соотношение или одно из следующих трех ключевых слов: left (указывает 0 % длины по оси x), center (указывает среднюю точку) или right (указывает 100 %). Может быть указано вторым значением при использовании ключевых слов. Допускаются отрицательные значения. Начальное значение.
y-axis Второе значение указывает положение на оси Y. Допускается использование числовых значений длины (допустимые единицы измерения CSS), процентное соотношение или одно из следующих трех ключевых слов: top (указывает 0 % длины по оси y), center (указывает среднюю точку) или bottom (указывает 100 %). Может быть указано первым значением при использовании ключевых слов. Допускаются отрицательные значения. Начальное значение.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства perspective-origin устанавливает его начальное значение.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

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

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

Наследуется

Нет.

Анимируемое

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

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

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

Замените left center на right center. Меняется точка наблюдения.

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
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Преобразование в пространстве</title>
  </head>
  <body>
    <input id="turn" type="checkbox" checked />
    <label for="turn">Применить поворот</label>
    <div class="scene">
      <div class="card">
        Лицевая сторона
        <div class="inner">Дочерний блок</div>
      </div>
    </div>
  </body>
</html>
style.css
CSS
.scene {
    perspective: 400px;
    perspective-origin: left center;
}
.card {
}
#turn:checked ~ .scene .card {
    transform: rotateY(50deg);
}