CSS3で3D
CSS3での3D表現をいじってみる。
SafariとChromeで動作可能。
HTML
<div id="draw-space">
<div id="cube_spx">
<div id="cube_spy">
<div id="sa"></div>
<div id="sb"></div>
<div id="sc"></div>
<div id="sd"></div>
<div id="se"></div>
<div id="sf"></div>
</div>
</div>
</div>CSS
/*--描画エリア----*/
#draw-space{
width:380px;
height:380px;
padding:100px;
background-color:#000;
-webkit-perspective:2000;/*--奥行きの設定--*/
}
#cube_spx{
width:300px;
height:300px;
margin:0px auto 0px auto;
opacity:0.7;
-webkit-transform-style:preserve-3d;
-webkit-animation: spin-x 8s infinite linear;
}
#cube_spy{
width:300px;
height:300px;
position:relative;
margin:50px auto 0px auto;
-webkit-transform-style:preserve-3d;
-webkit-animation: spin-y 16s infinite linear;
}
@-webkit-keyframes spin-x{
0%{-webkit-transform:rotateX(0deg);}
100%{-webkit-transform:rotateX(360deg);}
}
@-webkit-keyframes spin-y{
0%{-webkit-transform:rotateY(0deg);}
100%{-webkit-transform:rotateY(360deg);}
}
#cube_spy div{
width:300px;
height:300px;
position:absolute;
}
/*--前面----*/
#sa{
background:url(20120112a.jpg) no-repeat left top;
background-size:100% 100%;
-webkit-transform:translateZ(150px);
}
/*--右側面----*/
#sb{
left:150px;
background:url(20120112b.jpg) no-repeat left top;
background-size:100% 100%;
-webkit-transform:rotateY(-90deg);
}
/*--背面----*/
#sc{
background:url(20120112c.jpg) no-repeat left top;
background-size:100% 100%;
-webkit-transform:rotateY(180deg);
-webkit-transform:translateZ(-150px);
}
/*--左側面----*/
#sd{
left:-150px;
background:url(20120112d.jpg) no-repeat left top;
background-size:100% 100%;
-webkit-transform:rotateY(90deg);
}
/*--上面----*/
#se{
top:-150px;
background:url(20120112e.jpg) no-repeat left top;
background-size:100% 100%;
-webkit-transform:rotateX(90deg);
}
/*--下面----*/
#sf{
top:150px;
background:url(20120112f.jpg) no-repeat left top;
background-size:100% 100%;
-webkit-transform:rotateX(-90deg);
}
結構、面白い。
今のところSafariとChromeでしか使えないので、そうそう使えはしないが、
iPhone向けのサイトでだったら使っちゃってもいいかも。
なんだか描画する座標に関して、途中、よくわからなくなったので、
その辺をもう少し慣れるようにしていかないとなー。