CSSで画像を回転する方法～使い道がないので、逆さ絵を回転させてみた

■はじめに

スタイルシート（CSS）を使うと、Webサイトのデザインを効率的に変更することができます。見よう見まねのことが多いですが、筆者もブログのデザインをカスタマイズする際に利用しています。

CSSを使うことで実現できることは数多く、Web上には無数の情報が掲載されています。検索してみると、いろいろと面白い技法が見つかります。

■画像などを回転する

最近、Webサイトを検索して見つけたのが、画像などの要素を回転させるCSSの手法です。いろいろなサイトで紹介されていましたが、筆者にとって一番分かりやすかったのが、次のサイトです。

どうやら「transform:rotate()」 を使うと、角度を指定することで画像を傾けて表示できるようです。マウス操作に合わせて回転させるようなことも、できてしまうようです。

しかし、ブログに採り入れて活用する方法が思い浮かびませんでした…。仕方がないので、逆さ絵を探してきて、それを回転させてみることにしました。

■いつまでも仲睦まじく

まずは、面白い系です。マウスカーソルを当てると画像が回転します。婚前はお互い、にこにこしていますが、結婚後は…。

■動物編

続いて動物編です。普通の牛の絵に見えますが、逆さまにしてみると…。

同じ系統で、もう一つ。

■さらに動物編

さらにもう一つ、違うタッチの動物編です。ライオンの絵も、ひっくり返してみると…。

■江戸時代のものらしいです

日本でも、逆さ絵は江戸時代から描かれていたようです。同じく、マウスを当てて回転してみてください。

■少し怖い系？

今度は少し怖い感じ（？）の逆さ絵です。どうみても、おじいさんの顔ですが、回転すると…。

最後にもう一つ、どうぞ。

■さいごに

勢いにまかせてやってみましたが、動きのあるページは案外、楽しいかもしれませんね。しかし、今の筆者には、やはりこれ以上のことが浮かびません…。

もっと面白いアイデアを考え付いたら、また更新してみたいと思います。それでは、今回はこのあたりで…。