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っぽい表現や立方体を作る際に是非。。。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

CSS(CSS3)のみで3D立方体を作る方法

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner