SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.09.08
  • CATEGORY
TITLE

【CSS】transform-styleの使い方、3D変形を適用させる!

SHU[シュウ]

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

サーバーとドメインの同時取得で.jpが無料

シュウ
シュウ
今回は【CSS】transform-styleの使い方、3D変形を適用させる!
の解説になります!

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • transformプロパティについて学びたい方へ
  • 今回はtransform-style3D変形を適用についての解説になります。

今回は、前回に続きtransformに関する記事になります。
transform-styleとは、3D変形させる時の子要素の配置方法を指定します。

transform-styleの使い方について

transform-styleの使い方について

transform-styleプロパティとは、3D変形させる時の子要素の配置方法を指定します。
子要素、親要素と同一に配置するか、または子要素に3D変形を適用させるかをキーワードで指定します。
書き方は以下のようになります。

/*transform-style*/
要素 {
	transform-style: 値;
}
指定できる値
  • flat(初期値)
    子要素を親要素と同一に配置します。
    2Dで表示させます。
  • preserve-3d
    子要素に指定した3D変形を適用させます。3Dで表示させます。

transform-style flatについて

flat(初期値)とは、子要素を親要素と同一に配置します。
2Dで表示させます。

親要素「style-flat」には、「transform-style: flat」、「rotateY(30deg)」を指定しています。
rotateY(30deg)とは、要素をY軸(30度)に3D回転します。
ですが、平面で描かれているので変化が少し分かりずらい現象になっております。

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

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

flatについて

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

<!--黄色 box-->
<div class="style-flat">
	<div class="element style-1">rotateX(60deg)</div>
</div>
/*--共通 CSS--*/
.style-flat {
  transform-style: flat; /*-- ← flat--*/
  transform: rotateY(30deg);
  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--*/
.style-1 {
  transform: perspective(200px) rotateY(40deg);
  transform-origin: center center;
  background-color: #fd6158;
}

/*--黄色 box--*/
.style-2 {
  transform: rotateX(60deg);
  transform-origin: center center;
  background-color: #febe3e;
}

transform-style preserve-3dについて

preserve-3d子要素に指定した3D変形を適用させます。
3Dで表示させます。

親要素「style-flat」には、「transform-style: preserve-3d」、「rotateY(30deg)」を指定しています。
rotateY(30deg)とは、要素をY軸(30度)に3D回転します。

子要素である、「赤色、黄色 box」は、親要素で指定した「preserve-3d」が適用されているため、
3Dで表示になります。

preserve-3dについて

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

<!--黄色 box-->
<div class="style-preserve">
	<div class="element style-1">rotateX(60deg)</div>
</div>
/*--共通 CSS--*/
.style-preserve {
  transform-style: preserve-3d; /*-- ← preserve-3d--*/
  transform: rotateY(30deg);
  /*--以下省略--*/
}

.element {
  /*--以下省略--*
}

/*--赤色 box--*/
.style-1 {
  transform: perspective(200px) rotateY(40deg);
  transform-origin: center center;
  background-color: #fd6158;
}

/*--黄色 box--*/
.style-2 {
  transform: rotateX(60deg);
  transform-origin: center center;
  background-color: #febe3e;
}

関連記事

【CSS】transformの使い方、要素を2Dに変形する!
transform(2D)では、「マトリクス変形」、「回転」、「拡大・縮小」、「傾斜」、「移動」についての指定
【CSS】transformの使い方、要素を3Dに変形する!
transform(3D)では、「マトリクス変形」、「回転」、「拡大・縮小」、「移動」、「遠近効果」についての指定
【CSS】transform-originの使い方、中心点(位置)を指定する!
transform-originとは、要素を2D、3Dに変形させる時の中心点(位置)を指定

まとめ

今回はこれで以上です。

POINT
  • transform-styleプロパティとは、3D変形させる時の子要素の配置方法を指定します。
  • flat(初期値)とは、子要素を親要素と同一に配置します。2Dで表示させます。
  • preserve-3d子要素に指定した3D変形を適用させます。3Dで表示させます。
スポンサーリンク

SHU

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

最新記事

関連記事

オススメ記事

月別アーカイブ

page_top