【CSS】 transform-style：子要素を3D空間に配置するか2D平面にフラットに配置するかを指定する

transformプロパティ、要素の子要素が立体的な3D 空間に配置されるか、要素の面上に平らに描画されるかを決めます。

デフォルトの値は「flat」で子要素は2Dの2次元で親要素と同じ平面に配置されますが、「transform-style：preserve-3d;」を指定することで3D空間に配置されるようになります。

以下のアニメーションにて大きい円形(SUN)にマウスポインタを当ててみてください。

SUN

earth

mars

transform-style: preserve-3d;

上記サンプルは、親要素(SUN)の周辺に子要素が２つ(earthとmars)が付いて回っているアニメーションです。

まず、3D空間の深さ(奥行き)ために、「perspective: 1200px;」くらいに指定します。また3D空間を描画するために、親要素に「transform-style: preserve-3d;」を指定しました。

#universe {
      position: relative;
      height: 350px;
      width: 350px;
      perspective: 1200px;
      }
#sun {
	position: absolute;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background-color: #e4e4e4;
	border: 20px solid #333;
	box-shadow: inset 0 2px 45px #7c7c7e;
	opacity: 0.8;
	transform-style: preserve-3d;
	animation: spin 20s linear infinite;
    }

transform-style: flat;

親要素にマウスオーバーした際に3D空間から2D平面へのフラットな動きを切り替えるために「transform-style:flat;」を指定しました。親要素に「flat」値を指定すると、その子要素も2D平面でフラットに描画されます。

 #sun:hover {
	cursor:pointer;
	transform-style:flat;
    }

上記の親要素に指定したたアニメーション「animation: spin 20s linear infinite;」以下のように@keyframesでY軸に360度回転させるという具体的な動きを指定しました。

@keyframes spin {
  0% { transform: rotateY(0); }
  100%  { transform:rotateY(360deg); }
  }

以下のように、親要素に属している子要素のボックスを指定します。回転するボックスの中心点を指定します。ここでは初期値である「50% 50%;(中央)」にしました。

    #sun > div {
	position: absolute;
	top: 100px;
	left: 100px;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	box-sizing: border-box;
    transform-origin: 50% 50%;
	color:#FFF;
    }

以下のように、子要素２つをそれぞれ指定します。

 #sun > :first-child {
      background-color: #00c2f2;/*blue(earth)*/
	  animation: f-childspin 3s linear infinite;
      }

 #sun > :last-child {
      background-color: #f88222;/*orange(mars)*/
	  animation: l-childspin 1s linear infinite; 
      }

さらに、子要素２つにそれぞれ@keyframesを使ってアニメーションの具体的な動きを指定します。ここでは「translateZ(奥行き)」と「rotateY(Y軸への回転)」てアニメーションをつけました。

  @keyframes f-childspin {
    0% { transform: translateZ(-150px) rotateY(0deg);}
    100% { transform:translateZ(-150px) rotateY(360deg);}
    }
  @keyframes l-childspin {
    0% { transform: translateZ(150px) rotateY(0); }
    100% { transform:translateZ(150px) rotateY(-360deg);}
    }

各ブラウザの仕様がそれぞれ異なっているため、同じCSSを指定してもブラウザごとに、またはバージョンによってサポートする環境が異なってきます。従ってホームページ上で表示されるのもブラウザごとに違う可能性が出てきます。

これを最大限に抑えて、各ブラウザできちんと表示させるために用意されているのがベンダープレフィックス(vendor prefix)です。これをCSSに書き加えることで表示の不安定が少なくなるようです。

徐々にブラウザのサポート環境が改善されつつあるので、時間が経つにつれて、ベンダープレフィックスが要らなくなる時期が来るだろうが、当分はこれらをページ内で並行するのがいいかもしれません。

ベンダープレフィックス(vendor prefixes)

 div {
 　-webkit-transform-style: preserve-3d;
 　-moz-transform-style: preserve-3d;
 　-o-transform-style: preserve-3d;
 　transform-style: preserve-3d;
 　}