[CSS]シャドウもくるっと！ふわりと浮かせた画像をくるっと回転させるスタイルシート

画像にシャドウをつけてふわりと浮かせ、そのシャドウごとくるっと回転させるスタイルシートを紹介します。

シャドウ用の余計なマークアップは必要ありません。

CSS 3D Image Flip Gallery With Dynamic Shadows

静止画でポイントを。
デフォルト時は画像にシャドウをつけて、ふわりと浮かんでいる状態です。

デモページ

ホバーすると、画像が回転します。

回転中はシャドウも画像と共に回転し、反転すると画像も反転されます。

回転の完了につれ画像がフェードアウトし、キャプションのテキストが表示されます。

HTML

画像とキャプションのテキストをfigure要素で配置し、divで内包します。

<div class="flip-3d">
<figure>
<img src="yacht.jpg" alt="">
<figcaption>Yacht</figcaption>
</figure>
</div>

<div class="flip-3d">
<figure>
<img src="bee.jpg" alt="">
<figcaption>Bee</figcaption>
</figure>
</div>

シャドウ用の余分なマークアップは、必要ありません。

CSS

まずはfigure要素を3Dにし、各画像をfloatで配置します。

div.flip-3d {
perspective: 1200px; width: 30%; float: left;
}

div.flip-3d figure {
position: relative;
transform-style: preserve-3d;
transition: 1s transform;
font-size: 1.6rem;
}
div.flip-3d figure img {
width: 100%; height: auto;
}

キャプションは絶対位置で配置し、半分のターン（.5tuen）=180度回転した時に表示されるように設定します。

div.flip-3d figure figcaption {
position: absolute;
width: 100%; height: 100%; top: 0;
transform: rotateY(.5turn) translateZ(1px);
background: rgba(255,255,255,0.9);
text-align: center;
padding-top: 45%;
opacity: 0.6;
transition: 1s .5s opacity;
}

画像とキャプションの設定が完了したら、ホバー時のスタイルを指定します。

div.flip-3d:hover figure { transform: rotateY(.5turn); }
div.flip-3d:hover figure figcaption { opacity: 1; }

最後に、疑似要素を使ってシャドウを加えます。
シャドウの形は「radial-gradient」を使用しています。

div.flip-3d figure:after {
content: " "; display: block;
height: 8vw; width: 100%;
transform: rotateX(90deg);
background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
}