on:2013年9月4日sponsors画像にシャドウをつけてふわりと浮かせ、そのシャドウごとくるっと回転させるスタイルシートを紹介します。シャドウ用の余計なマークアップは必要ありません。Shadows静止画でポイントを。デフォルト時は画像にシャドウをつけて、ふわりと浮かんでいる状態です。デモページホバーすると、画像が回転します。回転中はシャドウも画像と共に回転し、反転すると画像も反転されます。回転の完了につれ画像がフェードアウトし、キャプションのテキストが表示されます。HTML画像とキャプションのテキストをfigure要素で配置し、divで内包します。alt=""><figcaption>Bee</figcaption></figure></div>シャドウ用の余分なマークアップは、必要ありません。CSSまずはfigure要素を3Dにし、各画像をfloatで配置します。auto;}キャプションは絶対位置で配置し、半分のターン(.5tuen)=180度回転した時に表示されるように設定します。opacity;}画像とキャプションの設定が完了したら、ホバー時のスタイルを指定します。}最後に、疑似要素を使ってシャドウを加えます。シャドウの形は「radial-gradient」を使用しています。Posts関連記事が見つかりませんでした。