[CSS]パネルをくるっと気持ちよく回転させるスタイルシート6種 -Fun with CSS

パネルをアニメーションで垂直・水平・斜めにくるっと回転させるスタイルシートを紹介します。

デモはCSS3アニメーションを使用しているので、最新のモダンブラウザでご覧ください。
各パネルをマウスでホバーすると、くるっとします。

Fun with CSS

回転のアニメーションは、左上から順に。

• 垂直：下方向
• 垂直：上方向
• 水平：右方向
• 水平：左方向
• 垂直：下方向：半回転
• 斜め

パネルはべた塗りだけでなく、写真画像でももちろん動作します。

Fun with CSS：ネコの画像でもくるっと回転

HTMLはシンプルで、各パネルはdiv要素です。

<div class="front">
	<h2>Front</h2>
	This is on front.
</div>

スタイルシートはちょっと長いので、下記ページをご覧ください。

• Fun with CSSのコード