CSS3では「transform」プロパティの「rotateX」「rotateY」といった値を使って
画像やテキストなどコンテンツの角度を制御することで、要素を立体的に表現することも可能になります。
前にもここで「CSS3「transform」で3Dっぽく画像を重ね合わせてみる実験。」と題して
画像を3Dっぽく重ね合わす方法なども紹介しましたが、
今回はCSS3で画像を貼り合わせて3D立方体を作ってみたので、そのやり方など紹介してみます。
（CSS3のアニメーションでの回転動作付き）
まずは動作サンプルから。
※動作推奨環境はSafariのみです！！！
立方体の下にある矢印「↑」「↓」「←」「→」の各リンクで
回転させることが出来ます。
「STOP」を押すことで回転停止。
CSS3 3D CUBE
≫動作が重かったりした場合には、こちらから別枠表示でどうぞ。
内部構成についてHTMLから。
◆HTML <div id="contents"> <div id="turn_up"> <div id="turn_down"> <div id="turn_left"> <div id="turn_right"> <div id="cube"> <div id="side_a"></div> <div id="side_b"></div> <div id="side_c"></div> <div id="side_d"></div> <div id="side_e"></div> <div id="side_f"></div> </div><!--/#cube--> <div id="remote"> | <a href="#turn_up">↑</a> | <a href="#turn_down">↓</a> | <a href="#turn_left">←</a> | <a href="#turn_right">→</a> |<br /> | <a href="#">STOP</a> | </div><!--/#remote--> </div><!--/#turn_right--> </div><!--/#turn_left--> </div><!--/#turn_down--> </div><!--/#turn_up--> </div><!--/#contents-->
<div id=”cube”>～</div>で囲われている部分が
実際に立方体を形成する部分になります。
<div id=”turn_up”>
<div id=”turn_down”>
<div id=”turn_left”>
<div id=”turn_right”>
これらのIDは回転させるアニメーションを制御する為のものです。
そしてCSSの記述は以下のようになります。
◆CSS
/* ContentsArea
-------------------------- */
#contents {
margin: 0 auto;
padding: 30px 0;
width: 400px;
text-align: center;
-webkit-perspective: 1000;
}
#cube {
margin: 80px auto;
opacity: 0.7;
width: 400px;
height: 400px;
position: relative;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(0);
}
#cube div {
width: 400px;
height: 400px;
position: absolute;
-webkit-transform: rotateX(-90deg);
}
#cube #side_a {
background: transparent url(img/photo01.jpg) no-repeat left top;
background-size:100% 100%;
-webkit-transform: translateZ(200px);
}
#cube #side_b {
left:200px;
background: transparent url(img/photo02.jpg) no-repeat left top;
background-size:100% 100%;
-webkit-transform: rotateY(-90deg);
}
#cube #side_c {
background: transparent url(img/photo03.jpg) no-repeat left top;
background-size:100% 100%;
-webkit-transform: rotateX(90deg);
-webkit-transform: translateZ(-200px);
}
#cube #side_d {
left:-200px;
background: transparent url(img/photo04.jpg) no-repeat left top;
background-size:100% 100%;
-webkit-transform: rotateY(90deg);
}
#cube #side_e {
top: -200px;
background: transparent url(img/photo05.jpg) no-repeat left top;
background-size:100% 100%;
}
#cube #side_f {
top: 200px;
background: transparent url(img/photo06.jpg) no-repeat left top;
background-size:100% 100%;
}
/* Controller
-------------------------- */
#remote {
padding-top: 50px;
font-size: 150%;
font-weight: bold;
line-height: 160%;
}
#remote a {
padding: 0 25px;
}
#remote a:hover {
background: #ccc;
}
/* TurnAnimation
-------------------------- */
#turn_up:target #cube {
-webkit-animation-name: turnUp;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-transform: rotateX(360deg)
}
@-webkit-keyframes turnUp {
0% { -webkit-transform: rotateX(0)}
100% { -webkit-transform: rotateX(360deg)}
}
#turn_down:target #cube {
-webkit-animation-name: turnDown;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-transform: rotateX(-360deg)
}
@-webkit-keyframes turnDown {
0% { -webkit-transform: rotateX(0)}
100% { -webkit-transform: rotateX(-360deg)}
}
#turn_left:target #cube {
-webkit-animation-name: turnLeft;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-transform: rotateY(-360deg)
}
@-webkit-keyframes turnLeft {
0% { -webkit-transform: rotateY(0)}
100% { -webkit-transform: rotateY(-360deg)}
}
#turn_right:target #cube {
-webkit-animation-name: turnRight;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-transform: rotateY(360deg)
}
@-webkit-keyframes turnRight {
0% { -webkit-transform: rotateY(0)}
100% { -webkit-transform: rotateY(360deg)}
}
「#side_a」～「#side_f」が立方体のそれぞれ面の指定になります。
デフォルト時（「STOP」状態）で言うと
—————————————
#side_a ： 前面
#side_b ： 右側面
#side_c ： 背面
#side_d ： 左側面
#side_e ： 上面
#side_f ： 下面
—————————————
といった指定になっており、
それぞれ「transform」を使って角度を調整。
回転動作については「:target」を使って
ターゲットとなったIDに対して「rotateX」や「rotateY」で
それぞれ別々の方向に360度回転させています。
全体の構成及び、動作についてはこんな感じです。
jQueryなどJavaScriptは一切使っていないCSSのみでの動作になっています。
CSS3では簡単に3Dっぽく立体的な表現を加えることが可能になるので
もっといろいろおもしろい表現が出来ないか試してみたいところです。
CSSやCSS3で3Dっぽい表現や立方体を作る際に是非。。。