perspective()

Базовая поддержка Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с марта 2022 года.

Функция perspective() CSS функция определяет преобразование, устанавливающее расстояние между пользователем и плоскостью z=0, перспективу, с которой пользователь видел бы 2-мерный интерфейс как 3-мерный. Результатом является тип данных <transform-function>.

Попробовать

Функция преобразования perspective() является частью значения transform, применяемого к преобразуемому элементу. Это отличается от свойств perspective и perspective-origin, которые прикреплены к родителю преобразованного в 3-мерное пространство дочернего элемента.

Синтаксис

Расстояние перспективы, используемое perspective() , задаётся значением <length>, которое представляет расстояние между пользователем и плоскостью z=0, или none. Плоскость z=0 — это плоскость, где все отображается в 2-мерном представлении, или на экране. Отрицательные значения являются синтаксическими ошибками. Значения, меньшие 1px (включая ноль), ограничены 1px. Значения, отличные от none , приводят к тому, что элементы с положительными значениями z кажутся больше, а элементы с отрицательными значениями z — меньше. Элементы с позициями z, равными или большими значению перспективы, исчезают, как будто они находятся за пользователем. Большие значения перспективы представляют небольшое преобразование; малые значения perspective() представляют большое преобразование; perspective(none) представляет перспективу с бесконечного расстояния и без преобразования.

perspective(d)

Значения

d: Является <length>, представляющим расстояние от пользователя до плоскости z=0. Если оно равно 0 или отрицательно, преобразование перспективы не применяется.

Декартовы координаты на ℝ^2	Однородные координаты на ℝℙ^2	Декартовы координаты на ℝ^3	Однородные координаты на ℝℙ^3
Это преобразование применяется к 3D пространству и не может быть представлено на плоскости.		Это преобразование не является линейным преобразованием в ℝ^3 и не может быть представлено матрицей декартовых координат.	$\left( \begin{array}{cccc} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & -\frac{1}{d} & 1 \\ \end{array} \right)$

Примеры

HTML

<p>Without perspective:</p>
<div class="no-perspective-box">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>

<p>With perspective (9cm):</p>
<div class="perspective-box-far">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>

<p>With perspective (4cm):</p>
<div class="perspective-box-closer">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>

CSS

.face {
  position: absolute;
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 100px;
  text-align: center;
}

p + div {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  margin-left: 100px;
}
.no-perspective-box {
  transform: rotateX(-15deg) rotateY(30deg);
}

.perspective-box-far {
  transform: perspective(9cm) rotateX(-15deg) rotateY(30deg);
}

.perspective-box-closer {
  transform: perspective(4cm) rotateX(-15deg) rotateY(30deg);
}

.top {
  background-color: skyblue;
  transform: rotateX(90deg) translate3d(0, 0, 50px);
}

.left {
  background-color: pink;
  transform: rotateY(-90deg) translate3d(0, 0, 50px);
}

.front {
  background-color: limegreen;
  transform: translate3d(0, 0, 50px);
}

Результат

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

Спецификация
CSS Transforms Модуль уровня 2 # funcdef-perspective

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`perspective`	12	12	10	15	4	18	10	14	3.2	1.0	3

См. также

transform
<transform-function>
Отдельные свойства преобразования:

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/perspective