SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.09.11
  • CATEGORY
TITLE

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

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【CSS】perspectiveの使い方、3Dに奥行きを指定する!
の解説になります!

こんな方に読んでほしい

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

今回は、perspectiveに関する記事になります。
perspectiveプロパティとは、要素を3D変形させた際に、奥行きを指定します。

perspectiveの使い方について

perspectiveの使い方について

perspectiveプロパティとは、要素を3D変形させた際に、奥行きを指定します。
transformプロパティを指定している要素の親要素に、perspectiveを指定します。
書き方は以下のようになります。

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

子要素 {
	transform: 関数(数値);
}
指定できる値
  • none(初期値)
    奥行きを指定しません。
  • 数値
    奥行きを数値で指定します。(0と指定した場合は、noneと同じ値になります)

perspective 数値について

数値とは、奥行きを数値で指定します。

親要素「perspective」には、「perspective: 300px」を指定しています。

子要素である、「赤色 box」には、「perspective(200px) rotateY(40deg)」の指定をしています。
perspective(200px)とは、奥行きの深さ200pxになります。
transform-originとは、中心点の位置になり、今回は「top left」になります。

子要素である、「黄色 box」には、「rotateX(60deg)」の指定をしています。
rotateX(60deg)とは、要素をX軸(60度)に3D回転します。
transform-originとは、中心点の位置になり、今回は「bottom left」になります。

このように、親要素に「perspective: 値」を指定することにより、
平面から、奥行きができます。

perspectiveについて

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

<!--黄色 box-->
<div class="perspective">
	<div class="element perspective02">rotateX(60deg)</div>
</div>
/*--共通 CSS--*/
.perspective {
  perspective: 300px; /*--perspective--*/
  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--*/
.perspective01 {
  transform: perspective(200px) rotateY(40deg);
  transform-origin: top left;
  background-color: #fd6158;
}

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

このように、3Dに変形した際に、奥行きの指定ができます。
今回は、親要素に「perspective」の指定をしたことにより、子要素にも適用されました。
子要素のみを3D変形する際には、「transform: perspective(数値)」を指定しましょう。

transform-origin 中心点(位置)について

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

さらに詳しくはこちら記事から
【CSS】transform-originの使い方、中心点(位置)を指定する!
transform-originとは、要素を2D、3Dに変形させる時の中心点(位置)を指定

まとめ

今回はこれで以上です。

POINT
  • perspectiveプロパティとは、要素を3D変形させた際に、奥行きを指定します。
  • perspectiveプロパティを指定する際には、transformプロパティを指定している要素の親要素に指定しましょう。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top