CSSチームが運営するHTML5・CSS3情報サイト

HTML5 GOGO

ボーズ・オンラインストア

Mckee

CSS3のアニメーションサンプルで、立方体を扱ったものは数あれど、それ以上の多面体のサンプルが見当たらなかったので、倍の12面体を作りました。

イメージ

概要

今回はそのサンプルを題材に、CSS3で新たに追加されたアニメーション系のプロパティをご紹介します。
※今回ご紹介するプロパティは、執筆時点では全て要ベンダープレフィックスです。

※対応ブラウザ:Chrome 12~, Safari 5~
Mozillaは「現時点では Z 軸はサポートされていないため 3D の回転や 3D 拡大縮小、3D
変換はサポートされていません。」だそうです。
MDN – CSS transforms の利用
※グラフィックボードが3Dの表現に対応している必要があります。
※動作にはCPUパワーが少々必要になります。

HTMLサンプル


※各面はリンクになっています。

回転方向を指定できるコントローラー付きのサンプルはコチラ

12面体の構造

HTML

1つの面を2つの要素で囲み、角度の調整を柔軟に行えるようにしています。
作成当初は、1つの面を1つの要素で制御しようとして角度と位置の調整に苦労しました。

</p>
<div id="dodecahedron">
<div>
<div><a href=""><img src="http://html555.jp/admin/wp-content/uploads/pentagon.png" alt="" /></a></div>
</p></div>
<div>
<div><a href=""><img src="http://html555.jp/admin/wp-content/uploads/pentagon.png" alt="" /></a></div>
</p></div>
<div>
<div><a href=""><img src="http://html555.jp/admin/wp-content/uploads/pentagon.png" alt="" /></a></div>
</p></div>
<div>
<div><a href=""><img src="http://html555.jp/admin/wp-content/uploads/pentagon.png" alt="" /></a></div>
</p></div>
<p><!-- …12面分続く --><br />

CSS

12面の各面に対して、最大で3つの角度と3方向への移動量を指定します。
作成当初は計算もせず手作業で各角度を指定しようとして地獄を見ました。

<br />
#dodecahedron div:nth-child(1) {<br />
 -webkit-transform:<br />
  rotateX(0deg)<br />
  rotateY(0deg)<br />
  rotateZ(0deg)<br />
  translateX(0px)<br />
  translateY(30px)<br />
  translateZ(88px);<br />
}<br />
#dodecahedron div:nth-child(1) div {<br />
 -webkit-transform:<br />
  rotateX(-28deg);<br />
}#dodecahedron div:nth-child(2) {<br />
 -webkit-transform:<br />
  rotateX(0deg)<br />
  rotateY(72deg)<br />
  rotateZ(0deg)<br />
  translateX(-7px)<br />
  translateY(30px)<br />
  translateZ(81px);<br />
}<br />
#dodecahedron div:nth-child(2) div {<br />
 -webkit-transform:<br />
  rotateX(-27deg);<br />
}<br />
#dodecahedron div:nth-child(3) {<br />
 -webkit-transform:<br />
  rotateX(0deg)<br />
  rotateY(108deg)<br />
  rotateZ(0deg)<br />
  translateX(-7px)<br />
  translateY(30px)<br />
  translateZ(-81px);<br />
}<br />
#dodecahedron div:nth-child(3) div {<br />
 -webkit-transform:<br />
  rotateX(27deg);<br />
}</p>
<p>/*...12面分続く*/<br />

プロパティの説明

アニメーション

transformプロパティ

transformプロパティは変形を指定するプロパティです。値には用意された関数を指定します。
今回のサンプルでは、正5角形を配置するのに使用しています。
ポイントは以下の3点です。

1. 書式

<br />
div {<br />
      transform:rotateX(-90deg);<br />
}<br />

2. 関数の種類
関数名 効果 値(単位)
rotate(deg) 回転 数値(deg)
scale(xy[x,y]) 拡大・縮小 数値(単位なし)
skew(deg) X軸,Y軸へのゆがみ 数値(deg)
translate(deg) 移動 数値(px)
3. 複数指定できる

<br />
div {<br />
     <a style="text-decoration: none; color: inherit; cursor: default; outline: none;" href="http://riopuercoalliance.org/7o2-inurl-active-web-cam/">http://riopuercoalliance.org/7o2-inurl-active-web-cam/</a>   transform:<br />
              rotateX(0deg)<br />
              rotateY(0deg)<br />
              rotateZ(0deg)<br />
              translateX(0px)<br />
              translateY(30px)<br />
              translateZ(88px);<br />
}<br />

country star dating christine eads

animationプロパティ

transformプロパティが、変化の最終状態しか指定できないのに対して、animationプロパティはキーフレームを利用して段階ごとに変化を細かく指定することができます。
今回のサンプルでは、正12面体を回転させるのに使用しています。

1. 書式

<br />
div {<br />
 animation: <a style="text-decoration: none; color: inherit; cursor: default; outline: none;" href="http://masjidkingkhalid.org/bq-extreme-dating-tv-show-uncensored/">http://masjidkingkhalid.org/bq-extreme-dating-tv-show-uncensored/</a>  'anime' 5s ease -2s infinite alternate;<br />
}<br />

2. 各値の効果

各値は、ショートハンドではなくプロパティに分解して見るとよく分かります。
先頭から順に以下の効果を持ちます。

<br />
div {<br />
 animation-name: 'anime'; <a style="text-decoration: none; color: inherit; cursor: default; outline: none;" href="http://3d-artist.ca/n980-echo-lake-ny-web-cam">echo lake ny web cam</a>  /*アニメーション名*/<br />
 animation-duration: 5s; /*アニメーション一回分の時間の長さ*/<br />
 animation-timing-function: ease; /*アニメーションの進行速度の割合(イージング)*/<br />
 animation-delay: -2s; /*アニメーションの開始を遅らせる時間*/<br />
 animation-iteration-count: infinite; /*アニメーションの繰り返し回数*/<br />
 animation-direction: alternate /*アニメーションを交互に反転再生させるか*/<br />
}<br />

3D効果

今回のサンプルでポイントとなるのが3D効果です。主に下記の2つのプロパティによって、3D効果をつけることができるようになります。

transform-styleプロパティ

transform-styleプロパティにpreserve-3dを設定することでperspective関連のプロパティが有効になり、
またtransformで、translateZ()などの奥行きをもった変形ができるようになります。

<br />
div {<br />
 transform-style:preserve-3d;<br />
}<br />

perspectiveプロパティ

perspectiveプロパティで遠近感を指定することができます。
数値が大きいほど平面的に見え、数値が小さいほど遠近感が強くなります

<br />
div {<br />
 perspective:1000;<br />
}<br />

アニメーション制御

回転

12面体を4つの要素で囲んで、それぞれの要素に回転する方向のアニメーションを指定しています。
矢印の向きとアニメーションする方向を対応させていて、コントローラのリンク先の要素にアニメーションを設定しています。

<br />
#towardUp:target #dodecahedron {<br />
 -webkit-animation-name:towardUp;<br />
 -webkit-animation-duration:5s;<br />
 -webkit-animation-iteration-count:infinite;<br />
}<br />
@-webkit-keyframes towardUp {<br />
 0% { -webkit-transform:rotateX(0)}<br />
 100% { -webkit-transform:rotateX(360deg)}<br />
}<br />

止める

animation-play-stateプロパティにpausedを指定するとアニメーションを止めることができます。
runningにするとアニメーションを再開します。
このプロパティは仕様からの削除が検討されています。
アニメーションを一度削除してから再指定するなどの方法で、再生と一時停止を切り替えることが可能なためです。
今回のサンプルでは、このプロパティを利用しないと、マウスオーバーでアニメーションを止めることが出来ず使い勝手が悪くなってしまいます。

<br />
div {<br />
 animation-play-state:paused;<br />
}<br />

感想

今回の記事は「CSS3のアニメーション系プロパティをご紹介する記事を書こう」という目的から、スライドショーを作ったり、アニメーションさせる要素の中にページを埋め込んでみたりと試行錯誤を繰り返してできました。初めの構想から公開まで1ヶ月以上かかってしまいましたが、CSS3の素晴らしさを実感できて今後のコーディングに対して夢が広がりました。

CSSでできる事が増えるのは、非常に喜ばしいことですが、ベンダープレフィックスありとか、なしとか気にする必要があるものは、どうしても使いづらいです。
魅力的なプロパティは多いですが、ベンダープレフィックスなしで動作するものでないと、対応するブラウザ毎にプレフィックスを変えて同じプロパティを何個も書くことになりますので、どうも気持ち悪いです。

今回は「JavaScriptを使わない」で作りましたが、マウスイベントや座標計算など、JavaScriptを使えばさらに夢が広がると思います。

Subscribe:
pagetop