最近、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℃に変化させることに加えて表示位置を若干調整しています。
仕組みについてはこんな感じになります。
リストと画像の２つに対して同時にアニメーションを付けているせいなのか
「:hover」時に画面がチラつくこともあります。（←原因解明できず…）
少々荒削りなサンプルになっているので
CSSでの3Dアニメーションの参考程度に留めておいてください。。。
CSS3の「transform」や「rotate」を使って
今後は3D表現をサイト内に盛り込んでいきたいものです。