2011-01-18

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

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

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で大きくなるようにmarginとwidth、heightを適当に指定してやれば良い。

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