読者です 読者をやめる 読者になる 読者になる

無題で行こう

気の向くままに書きたいことを書いていきます。とりあえず無題でいきましょう。毎日いろいろありますよね♪

MENU

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

f:id:kay72234:20160520215523j:plain

■はじめに

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

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


■画像などを回転する

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


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

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


■いつまでも仲睦まじく

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


f:id:kay72234:20160521093705j:plain



■動物編

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


f:id:kay72234:20160521094032j:plain




同じ系統で、もう一つ。


f:id:kay72234:20160521094501j:plain



■さらに動物編

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


f:id:kay72234:20160521094556j:plain



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

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


f:id:kay72234:20160521094917j:plain



■少し怖い系?

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


f:id:kay72234:20160521095122j:plain




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


f:id:kay72234:20160521095226j:plain



■さいごに

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

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


スポンサーリンク