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

シュウ

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

こんな方に読んでほしい

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

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

[記事の内容]

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に変形させる時の中心点(位置)を指定