CSS3 transformを使ってhtml要素をぬるぬる動かしてみた

概要
CSS3のアニメーションプロパティを使えばdiv要素の絞込みや並び替えのアニメーションがCSSで書けますね。
ブラウザの対応状況はまちまちですし、ベンダープレフィックスがついており、まだまだ使いにくいです。

参考
transformについては↓こちらがわかりやすかったです。
css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた
http://kachibito.net/web-design/css3-transition-sample.html

CSS3 2D Transforms
http://www.w3schools.com/css3/css3_2dtransforms.asp

動きの確認は↓こちらが便利
http://www.westciv.com/tools/transforms/


サンプル

jsfiddleが便利なので、こちらにサンプルをあげました。

↑上のResultをクリックしてください。
リンククリック時およびウィンドウサイズ変更時に、ボックスを再描画します。



対象ブラウザはFirefoxとSafariとChromeです。
IEはTransformのアニメーションには今のところ対応していませんね。。
※ jqueryのanimationを使えば同じことは実装できます。

別窓でのデモページはこちら

ダウンロードは↓こちらから
https://github.com/ryooo321/div_float_box

つくり
画像は「data:image/jpeg;base64」でセット。
filterByNum()で各divの表示/非表示およびpositionを決定。
adjustTranslate()でスタイル設定。