CSSリファレンス

Tweet

transform-styleは子要素を3D空間に配置するためのプロパティです。

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

.target{
	transform-style: preserve-3d;
}

transform-originプロパティは一部のブラウザでは「-webkit-」といったベンダープレフィックスを利用して実装されているので、ベンダープレフィックスを付けた記述も追加することでより多くのブラウザをサポートできるでしょう。

次のサンプルでは親要素に対してtransform-style: preserve-3d;指定しrotateX()と rotateY()で回転を行ない、子要素に対してtranslateZ()で3d移動を行っています。

.parent{
	width:100px;
	height:100px;
	background:rgba(0,255,0,.5);
	-webkit-transform:rotateX(45deg) rotateY(45deg);
	transform:rotateX(45deg) rotateY(45deg);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.child{
	width:100px;
	height:100px;
	background:rgba(255,0,0,.5);
	-webkit-transform: translateZ(100px);
	transform: translateZ(100px);
}

sample

対応ブラウザ

◯は実装済み、△はベンダープレフィックス付の実装、☓は未実装です。
Google ChoromeとFirefoxは執筆時点での最新バージョンでの実装状況です。

参考URL

9. The ‘transform-style’ Property - W3C

登録日 : 2013年11月01日 最終更新日 : 2013年11月1日

同じカテゴリー(Transform)のエントリー

• backface-visibility
• perspective-origin
• perspective
• transform-style
• transform-origin
• matrix3d()
• matrix()
• perspective()
• skewY()
• skewX()
• skew()
• rotate3d()
• rotateZ()
• rotateY()
• rotateX()
• rotate()
• scale3d()
• scaleZ()
• scaleY()
• scaleX()
• scale()
• translateZ()
• translate3d()
• translateY()
• translateX()
• translate()
• transform