transformとperspectiveを使った擬似3D表現 – browser-land

transformとperspectiveを使った擬似3D表現

 擬似3D

長方形の「本体」、地面に映る「影」、立体感を出す「陰」の3要素から成ります。
加えて各要素の距離を測る上で重要な「地面」も計算値として必要になります。

 HTML

HTMLの構成も「本体」「影」「陰」の3つから構成されていますが、
「影」は遠近法を表現する為に「perspective」のスタイルを適用しています。
HTML自体に特殊な記述は無く、7本の長方形を等間隔に設置して終了となります。

<div class=’cssParent_Back’>
 <div style=’top:0px;left:12.5%;’ class=’cssChild cssBack’></div>
 <div style=’top:0px;left:25.0%;’ class=’cssChild cssBack’></div>
 <div style=’top:0px;left:37.5%;’ class=’cssChild cssBack’></div>
 <div style=’top:0px;left:50.0%;’ class=’cssChild cssBack’></div>
 <div style=’top:0px;left:62.5%;’ class=’cssChild cssBack’></div>
 <div style=’top:0px;left:75.0%;’ class=’cssChild cssBack’></div>
 <div style=’top:0px;left:87.5%;’ class=’cssChild cssBack’></div>
</div>

<div class=’cssParent_Main’>
 <div style=’top:0px;left:12.5%;’ class=’cssChild cssMain’></div>
 <div style=’top:0px;left:25.0%;’ class=’cssChild cssMain’></div>
 <div style=’top:0px;left:37.5%;’ class=’cssChild cssMain’></div>
 <div style=’top:0px;left:50.0%;’ class=’cssChild cssMain’></div>
 <div style=’top:0px;left:62.5%;’ class=’cssChild cssMain’></div>
 <div style=’top:0px;left:75.0%;’ class=’cssChild cssMain’></div>
 <div style=’top:0px;left:87.5%;’ class=’cssChild cssMain’></div>
</div>

<div class=’cssPerspective’>
 <div class=’cssParent_Shadow’>
  <div style=’top:0px;left:12.5%;’ class=’cssChild cssSHadow’></div>
  <div style=’top:0px;left:25.0%;’ class=’cssChild cssSHadow’></div>
  <div style=’top:0px;left:37.5%;’ class=’cssChild cssSHadow’></div>
  <div style=’top:0px;left:50.0%;’ class=’cssChild cssSHadow’></div>
  <div style=’top:0px;left:62.5%;’ class=’cssChild cssSHadow’></div>
  <div style=’top:0px;left:75.0%;’ class=’cssChild cssSHadow’></div>
  <div style=’top:0px;left:87.5%;’ class=’cssChild cssSHadow’></div>
 </div>
</div>

 CSS

・親要素
親要素に共通するスタイルとして、height は設定せずに top のみ設定します。
これは子要素の上下位置が可変である為に、height を設定する意味がない事と、
top で共通の値を設定し、その位置を地面としています。

「本体」は上下を反転して地面との距離を0pxとしています。
反転しない場合は影との距離の計算が煩雑になりますが、
反転した場合は、地面と長方形の距離を「本体」「影」で同一の値が使用出来ます。

.cssParent_Main {
 position:absolute;
 width:100%;
 top:150px;
 transform:rotateX(180deg);
}

「陰」を表示する事で立体感を表現しています。
「陰」は「本体」と位置を「transform」で若干ずらす事で表現が可能となります。

.cssParent_Back {
 position:absolute;
 width:100%;
 top:150px;
 transform:rotateX(180deg) translateY(-2px) rotateY(5deg);
}

「影」を表示する事で奥行を表現しています。

.cssParent_Shadow {
 position:absolute;
 width:100%;
 top:150px;
 transform:rotateX(80deg);
}

「影」の遠近法には「perspective」を用いて表現します。
1000pxを設定していますが、より少ないpxを使えば遠近感が強調されます。

.cssPerspective {
 position:absolute;
 perspective:1000px;
 width:100%;
}

・子要素
「本体」「影」「陰」共に全て同じ長方形を用いますが、色のみ変更を行います。

.cssChild {
 position:absolute;
 width:10px;
 height:100px;
}
.cssBack { background:#ba2; }
.cssMain { background:#fe6; }
.cssShadow { background:#ccc; }
Browser-Land

: DATA

: BLOG

All
CSS
HTML5
JavaScript
WordPress

: MAIL


 

 

 

: PRAVACY POLICY

タイトルへ

サウンド設定

スクリーン設定

プレイ
データ
設定
停止
次へ
戻る
戻る
戻る
削除
再配置
戻る
戻る
メール
ブログ
Twitter
ポリシー
ユニット
武器
サークル
ボックス
コード
キング
ソルジャー
アーチャー
ウィザード
スペーサー
ギア
ホイール
クランク
フレームA
フレームB
レール
ウォール
ワイヤー
ゴム紐
カップ
大砲
弾倉
ウッド材
アイアン材
透過材
+5 deg.
-5 deg.
+45 deg.
-45 deg.
右回転
左回転
動力無し
Turn Right
Turn Left
Neutral
ロード
セーブ
バトル
ロード