WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「子要素の3Dトランスフォーム」

transform-style 「要素重なり時の３D表示」

「transform-style」は「transform」で変形した要素の重なり方を指定することができます。
重なり方は「2D」「3D」より選択することができます。

CSS Ver.適用要素継承
3.0　全要素なし
広告

transform-styleの指定方法

構文

transform-style : flat | preserve-3d;
プロパティ/設定値意味
transform-style : flat; 重なりを2Dで表示する
transform-style : preserve-3d; 重なりを3Dで表示する
デフォルト：「タグ毎のスタイル初期値」を参照
ページTOP

transform のサンプル

A
 
【CSS】
.comDiv{
	margin:20px auto;
	width:70px;
	height:70px;
	line-height:70px;
	font-size:60px;
	text-align:center;
}
.oyaArea{
	background:rgba(176, 224, 230, 0.7);
}
.koArea{
	background:rgba(255, 193, 139, 0.7);
	transform :	perspective(200px) rotateY(40deg);
}

【HTML】
<div class="comDiv oyaArea"></div>
<div class="comDiv koArea">A</div>
A
 
【HTML】
<div class="comDiv oyaArea"">
    <div class="comDiv koArea">A</div>
</div>
A
 
【HTML】
<div class="comDiv oyaArea"
     style="transform-style: flat;">
    <div class="comDiv koArea">A</div>
</div>
A
 
【HTML】
<div class="comDiv oyaArea"
     style="transform-style: preserve-3d;">
    <div class="comDiv koArea">A</div>
</div>
ページTOP
関連するCSS(STYLE)
transform要素の変形
transform-origin要素変形の起点
backface-visibility裏面の表示
perspective子要素の奥行きの指定
perspective-origin子要素の奥行きのx軸・y軸方向の位置
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン