３次元の変形効果においうて、親要素と子要素をどのような関係で表示するかを指定するときに、使用するのがtransform-styleプロパティです。
| 設定値 | 説明 |
|---|---|
| flat | 初期値。親要素に適用した３次元の変形効果は子要素には適用されず、子要素は、親要素に平面的に投影された形で表示される。 |
| preserve-3d | 親要素に適用した３次元の変形効果は子要素にも適用される。３次元上での親要素と子要素の位置関係がそのまま保持されるので、子要素が影に隠れて見えなくなることもあり。 |
サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>３次元上での子要素の描画方法を指定する</title> <style> body{ margin-top:32px; margin-left:96px; } div{ width:180px; height:180px; font-family:"メイリオ","sarif"; position:absolute; } .bgGold{background-color:gold;} .bgSilver{background-color:silver;} .bgPink{background-color:pink;} .left300px{left:300px;} .trans11{ -webkit-transform:perspective(400px) rotateY(-50deg); } .trans21{ -webkit-transform:perspective(400px) rotateY(-50deg); } .trans12{ -webkit-transform:perspective(400px) translateZ(-400px); } .trans22{ -webkit-transform:perspective(400px) translateZ(-400px); } .transStyleFlat{ -webkit-transform-style:flat; transform-style:flat; } .transStylePreserve3d{ -webkit-transform-style:preserve-3d; transform-style:preserve-3d; } </style> </head> <body> <div class="box1 bgGold trans11 transStyleFlat"> transform-style:flat<div class="bgSilver trans12"></div> </div> <div class="box2 bgGold trans21 transStylePreserve3d left300px"> transform-style:preserve-3d<div class="bgSilver trans22"></div> </div> </body> </html> |