perspective()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

perspective() はCSS の関数で、ユーザーと z=0 平面との間の距離を定義し、閲覧者からの視点は二次元のインターフェイスが三次元であるかのようになります。結果は<transform-function> データ型になります。

試してみましょう

transform: perspective(0);

transform: perspective(none);

transform: perspective(800px);

transform: perspective(23rem);

transform: perspective(6.5cm);

<section>  <div>    <div>1</div>    <div>2</div>    <div>3</div>    <div>4</div>    <div>5</div>    <div>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);}

perspective() 座標変換関数はtransform 値の一部で、座標変換される要素に適用されます。これはperspective およびperspective-origin の各プロパティが三次元空間に座標変換される子の親に付けられるのとは異なります。

構文

css

perspective(d)

値

d

<length> で、ユーザーと z=0 平面との間の距離を表します。 0 または負の数であった場合は、距離の変換は適用されません。z=0 平面とは、二次元表示ですべてが見える平面、つまり画面のことです。負の値は構文エラーになります。

値がnone 以外の場合、 z が正の位置にある要素は大きく表示されます。また、z が負の位置にある要素は小さく表示されます。z 位置がperspective の値と同じか大きい要素は、ユーザーの背後にあるかのようになり、非表示になります。perspective() が大きいと、座標変換が小さいことを表します。perspective() の値が小さいと、座標変換が大きいことを表します。perspective(none) は無限の距離からの遠近感を表し、座標変換はありません。

直交座標系 (ℝ^2)	同次座標系 (ℝℙ^2)	直交座標系 (ℝ^3)	同次座標系 (ℝℙ^3)
この変換は 3D 空間に適用され、平面で表現することはできません。		この変換は ℝ^3 では線形変換ではないので、直交座標行列を使用して表現することはできません。	$(\begin{matrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & - 1 / d & 1 \end{matrix}) \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)$

形式文法

<perspective()> =
perspective([<length [0,∞]>|none])

例

HTML

html

<p>perspective なし:</p><div>  <div>A</div>  <div>B</div>  <div>C</div></div><p>perspective あり (9cm):</p><div>  <div>A</div>  <div>B</div>  <div>C</div></div><p>perspective あり (4cm):</p><div>  <div>A</div>  <div>B</div>  <div>C</div></div>

CSS

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);}