【CSS】perspective-originの使い方、3Dに奥行きの起点を指定する！

シュウ

今回は【CSS】perspective-originの使い方、3Dに奥行きの起点を指定する！
の解説になります！

こんな方に読んでほしい

CSSを学び始めた方へ
perspective-originプロパティについて学びたい方へ
今回はperspective-origin3Dに奥行きの起点についての解説になります。

今回は、前回に続きperspectiveに関する記事になります。
perspective-originプロパティは、perspectiveプロパティと合わせて指定します。

perspectiveプロパティについては前回の記事で解説をしております。

【perspective】についての解説

【CSS】perspectiveの使い方、3Dに奥行きを指定する！

perspectiveの指定方法についての解説になります。

[記事の内容]

perspective-originの使い方について

perspective-originプロパティとは、3D変形させた時、要素の奥行きの起点を指定します。
perspective-originプロパティは、perspectiveプロパティと合わせて指定します。
書き方は以下のようになります。

/*perspective*/
親要素 {
	perspective: 値;
	perspective-origin: 値;
}

子要素 {
	transform: 関数(数値);
}

指定できる値

数値+単位
要素の左上から見て数値と単位で指定します。
例) 「perspective-origin: 50px 100px」のように指定します。
%
要素の幅、高さの割合を指定します。
例) 「perspective-origin: 50% 50%」は要素の中心となります。
left
要素のX軸を0%(左端)に指定します。
right
要素のX軸を100%(右端)に指定します。
top
要素のY軸を0%(上端)に指定します。
bottom
要素のY軸を100%(下端)に指定します。
center
要素のX軸またはY軸を50%(中心)に指定します。

perspective-origin 指定方法について

親要素「perspective」には、「perspective: 300px」を指定しています。
各クラス名を付け個別に指定しています。
「赤色 box(.origin01)」の親要素には「perspective-origin: 0 0」を指定しています。
「黄色 box(.origin02)」の親要素には「perspective-origin: 100% 100%」を指定しています。

「赤色 box(.origin01)」は、「0 0」の指定ですが、「top left」でのキーワード指定でも問題ありません。
「黄色 box(.origin02)」は、「100% 100%」の指定ですが、「bottom right」でのキーワード指定でも問題ありません。

/*赤色 box 親要素*/
.perspective {
	perspective: 300px;
}
.origin01 {
	perspective-origin: 0 0;
}

/*黄色 box 親要素*/
.perspective {
	perspective: 300px;
}
.origin02 {
	perspective-origin: 100% 100%;
}

「赤色 box(.origin01)」は、左上が起点となっております。
「黄色 box(.origin02)」は、右下が起点となっております。

perspectiveについて

(200px) (40deg)

rotateX(60deg)

<!--赤色 box-->
<div class="perspective origin01">
	<div class="element perspective01">(200px) (40deg)</div>
</div>

<!--黄色 box-->
<div class="perspective origin02">
	<div class="element perspective02">rotateX(60deg)</div>
</div>

/*--共通 CSS--*/
.perspective {
  perspective: 300px;
  width: 150px;
  height: 150px;
  display: inline-block;
  background:rgba(204, 204, 204, 0.7);
  margin: 80px 100px 50px;
}

.element {
  width: 150px;
  height: 150px;
  position: relative;
  color: #333;
  text-align: center;
  line-height: 150px;
}

/*--赤色 box--*/
.origin01 {
	perspective-origin: 0 0;
}

.perspective01 {
  transform: perspective(200px) rotateY(40deg);
  transform-origin: top left;
  background-color: #fd6158;
}

/*--黄色 box--*/
.origin02 {
	perspective-origin: 100% 100%;
}

.perspective02 {
  transform: rotateX(60deg);
  transform-origin: bottom left;
  background-color: #febe3e;
}

【CSS】perspectiveの使い方、3Dに奥行きを指定する！
perspectiveとは、要素を3D変形させた際に、奥行きを指定します。