Loading
loading..

WEBページの次世代、CSS3の3D表現

 2014年11月11日 HTML5/CSS3 技術的なこと
CSS3


この「千葉県習志野市ホームページ制作somosomo」のトップページに無駄に浮遊している3dの立方体。
これはCSS3で出来ています。
CSS3で3d表現が可能になって、最新のブラウザで続々と表現されるようになってきました。
まだまだ、全てのブラウザで見れるわけじゃないので、使うべきではないですがそのうちホームページ制作における3d表現は一般化されるでしょう。
HTML5プロフェッショナル認定試験レベル1では出てこない範囲です(軽く触れられる可能性はある)。

3dを理解するには本当なら、数学の行列とか理解する必要があるんですかね?
CANVASを使ったWebGLや、ゲームを作るにもUnityという便利なライブラリがありますが、3dを僕のような凡人にも表現できるようにしてくれた開発者には尊敬の念しかありませんね。
もっと勉強していきたいです。

CSSで3dの立方体を作るのは、そこまで難しくないです。
考え方としては、土台に6枚の正方形のDIVを重ねて、X,YにZを加えた3つを軸にして、一個ずつ、上、下、右、左、奥、正面と言うような感じに移動させます。

HTML

<div class="cube">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
</div>

CSS

.cube{
  width:200px; height:200px;
  position: relative;
  -webkit-transform-style:preserve-3d;/*3D描画を有効に*/
  transform-style:preserve-3d;
  -webkit-transform:rotateX(45deg) rotateY(45deg) rotateZ(45deg);/*3d描写を見やすいように角度をつける*/
  transform:rotateX(45deg) rotateY(45deg) rotateZ(45deg);
}
.cube > div{
  border:5px blue solid;/*線の色と幅*/
  background-color:RGBa(255,255,255,0.9);/*面の色*/
  position:absolute;
  top:500;left:500;
  height:200px; width:200px; 
  -webkit-backface-visibility:visible; 
  backface-visibility:visible; 
  text-align:center;
  padding-top:15px;
  font-size:150px;
  color:#000000;
}

/*面を上、下、右、左、奥、正面に*/
.cube > div:nth-child(1){-webkit-transform:rotateY(270deg) translateZ(100px);transform:rotateY(270deg) translateZ(100px);}
.cube > div:nth-child(2){-webkit-transform:rotateY(180deg) translateZ(100px);transform:rotateY(180deg) translateZ(100px);}
.cube > div:nth-child(3){-webkit-transform:rotateY(90deg) translateZ(100px);transform:rotateY(90deg) translateZ(100px);}
.cube > div:nth-child(4){-webkit-transform:rotateX(90deg) translateZ(100px);transform:rotateX(90deg) translateZ(100px);}
.cube > div:nth-child(5){-webkit-transform:rotateX(270deg) translateZ(100px);transform:rotateX(270deg) translateZ(100px);}
.cube > div:nth-child(6){-webkit-transform:translateZ(100px);transform:translateZ(100px);}
A
B
C
D
E
F

こんな感じです。
transform-style:preserve-3d;で3d描写を有効にする必要があります。
また、perspectiveというプロパティで遠近感の設定をすることもできます。
対応していないブラウザもありますが、CSS3のclip-path:polygonで、様々な図形を作れれば、立方体や直方体以外にも三角錐なども出来そうですね。

何度も言いますが、対応していないブラウザも多いので、実装はおすすめできません。
でも、ホームページ制作をする上で次のトレンドになり得る可能性があります。


文系プログラミングスクール
HTML5認定試験対策講座

ホームページ制作、WEB集客、
IT・WEB担当者研修について
お気軽に無料相談へお越しください。

東京都内からも近い千葉県船橋市にて!!
お伺いすることも可能です(遠方除く)


無料相談申込み