[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>

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

top of page

©2017 coliss