:after疑似要素を使って、写真を重ねたようなエフェクトにするチュートリアルを紹介します。重ねたエフェクトはホバー時にCSS3アニメーションします。Pseudo-Elements[ad#ad-2]デモ実装デモデモは4つあり、垂直方向に重ねたもの、回転を加えて重ねたものがあり、それぞれホバー時に垂直方向に重なります。デモページ※ホバー時のアニメーションはFirefoxのみです。実装HTMLHTMLは非常にシンプルです。ラッパーのdiv要素はWebkit系ブラウザ用で、将来無しでも機能するようになるかもしれません。/></div>[ad#ad-2]CSSスタイルシートは4つのデモのキャプチャと共に、紹介します。右端の写真が垂直方向に重なっただけのスタイルシートです。:afterを使用します。*/2番目のスタイルシートではrotateを使い、重なりに回転を加えます。rotate(4deg);}3番目は:afterの重なりを反対方向にしています。rotate(-4deg);}4番目は2番目と似ており、両方とも反対方向に回転させています。rotate(-6deg);}ホバー時には回転させていない状態に戻します。:afterのCSS3アニメーションはFirefoxのみサポートされています。