最近、CSSのみでの3D表現を実験的に行っているサイトを多々見かけます。
CSSでの3D表現はCSS3から追加となったプロパティ「transform」で実装可能となります。

そんな「transform」を使ってCSS3での3D的表現方法を実験してみたので
簡単なサンプルにて紹介してみます。

まずは動作サンプルから。
※「transform」プロパティも今現在Webkitブラウザのみの対応となっていることもあり、
 このサンプルの動作環境はSafariのみです!!!

CSS3 3D ROTATE

5枚の画像に角度を付け、
レイヤー風に重ね合わせた見た目を表現しています。

各画像にマウスオーバーすることで、
角度を回転させ画像を正常の角度で見るアニメーションが実行されます。(ギャラリー風)

内部構成について。
HTMLソースは単純なリストのみです。

◆HTML
<div id="contents">

<ul>
<li><a href="#"><img src="img/photo01.jpg" width="300" height="225" alt=""></a></li>
<li><a href="#"><img src="img/photo02.jpg" width="300" height="225" alt=""></a></li>
<li><a href="#"><img src="img/photo03.jpg" width="300" height="225" alt=""></a></li>
<li><a href="#"><img src="img/photo04.jpg" width="300" height="225" alt=""></a></li>
<li><a href="#"><img src="img/photo05.jpg" width="300" height="225" alt=""></a></li>
</ul>

</div><!--/#contents-->

画像一枚一枚を<li>で囲っている、
通常のリストの構成です。

これらのリストに対してCSS3「transform」で角度をつけたり、
「:hover」時のアニメーションを実装します。

CSSの記述は以下。

◆CSS
/* ContentsArea
-------------------------- */
#contents {
	margin: 0 auto;
	width: 300px;
	min-height: 450px;
	text-align: left;
}

#contents ul {
	width: 300px;
}

#contents ul li {
	width: 300px;
	min-height: 50px;
	list-style: none;
	position: relative;

	-webkit-perspective: 400;
	-webkit-transition-property: perspective;
	-webkit-transform-style: preserve-3d;
	-webkit-transition-duration: 0.5s;
}

#contents ul li img {
	-webkit-transform: rotateX(75deg);
	-webkit-transition-property: transform;
	-webkit-transition-duration: 0.3s;

	-webkit-box-shadow:0 3px 10px #888;

	top: -90px;
	left: 0;
	width: 300px;
	position: absolute;
	display: block;
	opacity: 0.7;
	z-index: 10;
}


/* CSS3 Hover 3D TurnAnimation
-------------------------- */
@-webkit-keyframes hoverTurn {
	0% {min-height: 50px;}
	100% {min-height: 225px;}
}

#contents ul li:hover {
	-webkit-animation-name: hoverTurn;
	-webkit-animation-duration: 0.3s;
	-webkit-animation-iteration-count: 1;

	min-height: 225px;
}

@-webkit-keyframes ImgRotate {
	0% {top: -90px; -webkit-transform: rotateX(75deg);opacity: 0.7;}
	100% {top: 20px; -webkit-transform: rotateX(0deg);opacity: 1;}
}

#contents ul li:hover img {
	-webkit-animation-name: ImgRotate;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;

	-webkit-transform: rotateX(0deg);
	-webkit-box-shadow: 0 0 10px #000;
	top: 20px;
	opacity: 1;
	z-index: 20;
}

「#contents ul li」で「transform-style:preserve-3d」等を指定し、
その中の画像「#contents ul li img」で傾き角度「transform: rotateX(75deg);」を指定しています。

「transform: rotateX」の指定は「transform: rotateY」とすることで
角度を設定する基準となるX軸、Y軸の変更が可能となります。

「:hover」の動作はリストに対しては高さ(最小値)の変化のみ
画像に対して角度を0℃に変化させることに加えて表示位置を若干調整しています。

仕組みについてはこんな感じになります。

リストと画像の2つに対して同時にアニメーションを付けているせいなのか
「:hover」時に画面がチラつくこともあります。(←原因解明できず…)

少々荒削りなサンプルになっているので
CSSでの3Dアニメーションの参考程度に留めておいてください。。。

CSS3の「transform」や「rotate」を使って
今後は3D表現をサイト内に盛り込んでいきたいものです。

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

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

Related Posts

Comments (1)

  • CSS3のみで3D立方体を作る方法 | BlackFlag | 2011.03.29 9:56

    [...] 前にもここで「CSS3「transform」で3Dっぽく画像を重ね合わせてみる実験。」と題して 画像を3Dっぽく重ね合わす方法なども紹介しましたが、 今回はCSS3で画像を貼り合わせて3D立方体を作っ [...]







コメント内容

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

CSS3「transform」で3Dっぽく画像を重ね合わせてみる実験。

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