子要素の3Dトランスフォームを指定するには？ - transform-styleの解説

子要素の3Dトランスフォームを指定するには?

要素書式

transform-style: 【子要素の三次元上での描画の指定】 ;

対応ブラウザ

IE 9：×
Firefox 10.0：○(-moz-transform-style)
Opera 11.61：×
Chrome 17.0：○(-webkit-transform-style)
Safari 5.1：○(-webkit-transform-style)

※現在、動作にベンダープレフィックスが必要なブラウザは、括弧内にベンダープレフィックス付のプロパティを記載しています。
※ブラウザはWindows 7上で動作確認を行っています。
※ユーザーの設定より、異なる挙動をする場合があります。

値一覧

値	内容
flat	三次元変形で、子要素の親要素への平面投影を行う。既定値。
preserve-3d	三次元変形で、子要素の親要素への平面投影を行わない。

解説文

transform-styleプロパティは、三次元変形で、親要素の描画と子要素の描画をどう関係づけるかを指定します。

transform-styleプロパティの値に「flat」が指定された場合、子要素は、親要素に、平面的に投影された形で描画されます。言い換えると、子要素は、親要素の平面に描かれた立体的な絵のように振る舞います。

これに対して、transform-styleプロパティの値に「preserve-3d」が指定された場合、親要素の描画される平面に対する、子要素の三次元上の位置関係はそのまま維持されます。その為、場合によっては子要素が影に隠れて見えなくなる場合もあります。

例えば、子要素に対して、奥行方向に100pxの平行移動を加えると、親要素に何も変形を加えていない状態では、子要素は、三次元空間では、親要素の背後、100pxの位置にあることになります。

この状態で、親要素を、上下の軸（Y軸）を中心に時計回りに回転させると、通常の三次元空間では、親要素の後ろにあった子要素も位置関係を保って回転し、90度で右側100px、180度で手前側100pxの位置にあることになるはずです。

しかし、既定（「transform-style:flat」）では、そのような動作にはならず、子要素は、親要素の上に張り付いたように描画されます。つまり、子要素は親要素の平面上に存在するものとして扱われます。

transform-styleプロパティの値に「preserve-3d」を指定した場合は、こうした、親要素の平面上への投影操作は行われません。

このプロパティは継承されず、直接の子要素に対してしか効果がありません。子要素にさらに子要素がある場合は、そこでも指定する必要があります。

なお、Chrome、Safariは、実装がまだ不十分なため、環境によっては正しく描画されない場合があります。

サンプルソース

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
   .box{
       width:200px;
       height:200px;
       border: solid 1px black;
       position:absolute;
       left:100px;
       top:100px;
       font-size:2em;
   }
   
   #parent{
   
       /* 
           子要素が親要素に平面投影されないように指定します 
       */
       transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
       -webkit-transform-style: preserve-3d;
       
       /* 親要素を回転させます */
       transform: rotateX(-20deg) rotateY(-20deg);
       -moz-transform: rotateX(-20deg) rotateY(-20deg);
       -webkit-transform: rotateX(-20deg) rotateY(-20deg);
   }
   
   /* 以下で子要素を変形させて立体的なボックスを作成します */
   
   #box1{
       background-color:rgba(0,255,0,0.3);
       transform: translateZ(100px);
       -moz-transform: translateZ(100px);
       -webkit-transform: translateZ(100px);
   }
   #box2{
       background-color:rgba(0,255,0,0.3);
       transform: translateZ(-100px);
       -moz-transform: translateZ(-100px);
       -webkit-transform: translateZ(-100px);
   }
   #box3{
       background-color:rgba(255,0,0,0.3);
       transform: translateY(100px) rotateX(90deg);
       -moz-transform: translateY(100px) rotateX(90deg);
       -webkit-transform: translateY(100px) rotateX(90deg);
   }
   #box4{
       background-color:rgba(255,0,0,0.3);
       transform: translateY(-100px) rotateX(90deg);
       -moz-transform: translateY(-100px) rotateX(90deg);
       -webkit-transform: translateY(-100px) rotateX(90deg);
   }
   #box5{
       background-color:rgba(0,0,255,0.3);
       transform: translateX(100px) rotateY(90deg);
       -moz-transform: translateX(100px) rotateY(90deg);
       -webkit-transform: translateX(100px) rotateY(90deg);
   }
   #box6{ 
       background-color:rgba(0,0,255,0.3);
       transform: translateX(-100px) rotateY(90deg);
       -moz-transform: translateX(-100px) rotateY(90deg);
       -webkit-transform: translateX(-100px) rotateY(90deg);
   }
</style>
</head>
<body>
<div id="parent">
   <div id="box1" class="box">手前側</div>
   <div id="box2" class="box">奥側</div>
   <div id="box3" class="box">下側</div>
   <div id="box4" class="box">上側</div>
   <div id="box5" class="box">右側</div>
   <div id="box6" class="box">左側</div>
</div>
</body>
</html>

transform-styleの解説