回転しながらズームイン・ズームアウト

オブジェクトを回転しながらズームさせるにはCSS3のtransitiontransformを組み合わせるだけで良い。ぐるぐるぐるぐるどっか~ん。Ch9とFx4b9、Op11、Sf5あたりなら動く。

View Demo: Rotate and Zoom

CSSコードはややこしくはないが、imgのリサイズをCSSでまかなったりマイナー寄りの書き方かもしれない。読みづらいのでベンダー拡張プリフィックスは省略した。実際に書く時はプロパティ名の頭に-webkit-/-moz-/-o-を付けてコピペすれば良い。

#zoom {
  width: 400px;
  height: 400px;
}

#zoom img {
  margin: 150px;
  border: none;
  display: block;
  width: 100px;
  height: 100px;
  transition-duration: 3s;
}

#zoom img:hover {
  margin: 0;
  width: 400px;
  height: 400px;
  transition-duration: 3s;
  transform: rotate(1080deg);
}

キモはtransform: rotate(1080deg);で、1080度(三回転分)を指定することによってぐるぐる度を増す。transition-durationでアニメーションの長さを調節できる。あとは通常時は中央に小さく表示し、:hoverで大きくなるようにmarginwidthheightを適当に指定してやれば良い。

クリックすると回転しながらズームアウトし消すとかをCSS3だけでできないかなーと思ったが難しそう:activeを使った場合、クリック後ズームアウトまではいけるが消えることは絶対にない。消すスタイルを定義したクラス名をonclickで割り当てるようにしてやれば普通にできる

追記

CSS3の:target擬似クラスを利用すると状態の変化を固定することができるので、CSS3だけでクリックするとズームアウトして消すことができた

完全に忘れていた:target擬似クラスについては、Delicious経由でCSS3 toggle-button without JavaScriptを見て思い出した。このデモでは重ね合わせたa要素のうち1つをpointer-eventを使って無効にすることによってボタンをトグルさせている。