CSS3 の Transforms プロパティを使って簡単 3D Cube 表示
Chrome が version 12 になったときにテンションが上がって作ったサンプルです.
それまでは Safari でしかサポートされていなかった CSS3 による Z軸の奥行き表現が Chrome でも使えるようになり, より CSS3 による豊かな表現が可能になりました.
作ったのはよかったのですが, それから仕事が忙しくなり半年間放置してたってのは反省…
iPhone でも普通に動くのでよかったら参考までに. iPhone は webkit をサポートしてない(正確にはネイティブ起動のsafariでは動くらしいが…)ので標準での 3D 表現って意味では唯一の方法かも.
Code
サンプルの全コードです.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS3 - 3D Cube</title>
<style>
.main {
width: 850px;
padding: 20px;
display: -webkit-box;
/* 3D設定 */
-webkit-transform-style: preserve-3d;
-webkit-perspective: 1200;
/* 少し上から見下ろす感じ */
-webkit-transform: rotateX(-15deg);
}
.cube {
margin: 40px;
width: 200px;
height: 200px;
-webkit-transform-style: preserve-3d;
-webkit-transform: translateZ( -100px );
}
.rolling {
-webkit-animation: rolling 2s infinite;
}
.pitching {
-webkit-animation: pitching 2s infinite;
}
.yawing {
-webkit-animation: yawing 2s infinite;
}
@-webkit-keyframes rolling {
0% { -webkit-transform: translateZ(-100px) rotateX(0deg); }
100% { -webkit-transform: translateZ(-100px) rotateX(360deg); }
}
@-webkit-keyframes pitching {
0% { -webkit-transform: translateZ(-100px) rotateY(0deg); }
100% { -webkit-transform: translateZ(-100px) rotateY(360deg); }
}
@-webkit-keyframes yawing {
0% { -webkit-transform: translateZ(-100px) rotateZ(0deg); }
100% { -webkit-transform: translateZ(-100px) rotateZ(360deg); }
}
.cube [class|=plane] {
position: absolute;
width: 200px;
height: 200px;
border: solid 1px black;
font-size: 64px;
text-align: center;
line-height: 200px;
}
.cube .plane-front { background-color: hsla( 0, 100%, 50%, 0.7); }
.cube .plane-back { background-color: hsla( 60, 100%, 50%, 0.7); }
.cube .plane-right { background-color: hsla(120, 100%, 50%, 0.7); }
.cube .plane-left { background-color: hsla(180, 100%, 50%, 0.7); }
.cube .plane-top { background-color: hsla(240, 100%, 50%, 0.7); }
.cube .plane-bottom { background-color: hsla(300, 100%, 50%, 0.7); }
.cube .plane-front { -webkit-transform: translateZ(100px); }
.cube .plane-back { -webkit-transform: rotateX(-180deg) translateZ(100px); }
.cube .plane-right { -webkit-transform: rotateY( 90deg) translateZ(100px); }
.cube .plane-left { -webkit-transform: rotateY( -90deg) translateZ(100px); }
.cube .plane-top { -webkit-transform: rotateX( 90deg) translateZ(100px); }
.cube .plane-bottom { -webkit-transform: rotateX( -90deg) translateZ(100px); }
</style>
</head>
<body>
<h1>CSS3 - 3D Cube</h1>
<div class="main">
<div class="cube rolling">
<div class="plane-front">front</div>
<div class="plane-back">back</div>
<div class="plane-right">right</div>
<div class="plane-left">left</div>
<div class="plane-top">top</div>
<div class="plane-bottom">bottom</div>
</div>
<div class="cube pitching">
<div class="plane-front">front</div>
<div class="plane-back">back</div>
<div class="plane-right">right</div>
<div class="plane-left">left</div>
<div class="plane-top">top</div>
<div class="plane-bottom">bottom</div>
</div>
<div class="cube yawing">
<div class="plane-front">front</div>
<div class="plane-back">back</div>
<div class="plane-right">right</div>
<div class="plane-left">left</div>
<div class="plane-top">top</div>
<div class="plane-bottom">bottom</div>
</div>
</div>
</body>
</html>
Tips
遠近感を出す
-webkit-transform-style: preserve-3d;
と設定することで3D関連の transform が可能になります.
また, -webkit-perspective プロパティにに数値を設定することで遠近感を調整することができます.
-webkit-animation プロパティを使って回転アニメーション
-webkit-animation を使うと簡単にアニメーションを再生することができます.
今回のエントリーとはあまり関係がないので詳しい説明は端折ります.
以前 JavaScript でピアノを作ったときにざっくりまとめたので知りたい方はこちらへ.
Reference
来週から年末にかけて忙しくなるので, 毎日更新ってのは厳しいかなぁ～.
CSS3 を使ってちょっとした 3D 表現サンプルを作って見ました.
『CSS3 の Transforms プロパティを使って簡単 3D Cube 表示』 http://t.co/uMa9m8tB
https://t.co/QaXBOuYP
#web #css3
CSS3 を使ってちょっとした 3D 表現サンプルを作って見ました.
『CSS3 の Transforms プロパティを使って簡単 3D Cube 表示』 http://t.co/uMa9m8tB
https://t.co/QaXBOuYP
#web #css3
昔CSS3にハマッてた頃に作ったサンプルをjsdo.itに移植したのでエントリーのリンクを修正. その2.『CSS3のTransformsプロパティを使って簡単3D Cube表示』
http://t.co/uMa9m8tB
https://t.co/QaXBOuYP
#css3