オンマウスで画像変形処理(CSS)

WordPressでは、当り前のCSSを使った画像変形効果を、HAIKでも出来ないかといろいろ試行錯誤の結果、見事に実装できました。画像の移動・拡大・縮小・回転・傾斜等、サイトに様々な効果を与えたい時は、基本的にCSS3の「transform」プロパティで行います。
画像にちょっとした上記の動きを付けるだけでもサイトのリッチ感が向上します。

概略の設定手順ですが、ページの先頭でCSSをBeforeスクリプトで記述します。
実際の画像表示は、HTMLタグで&showを挟んで使用します。

オンマウスで画像移動

オンマウスで画像移動

オンマウスすると画像が右下方向に若干移動します。


オンマウスで画像拡大

オンマウスで画像拡大

オンマウスすると画像が拡大します。


オンマウスで画像拡大・その2

オンマウスで画像拡大

前記と同様にオンマウスすると画像が拡大しますが、画像の枠内での拡大となります。
当サイトのトップページで使用している画像表現が、この枠内拡大機能に相当します。


オンマウスで画像反転

オンマウスで画像反転

オンマウスで画像が反転します。


オンマウスで画像傾斜

オンマウスで画像傾斜

オンマウスで画像が傾斜します。


ソースコードの一部分を公開します。

[check]CSSを記述するスクリプト文

#beforescript{{
<style type="text/css">
<!--
/*ここに上のcssを入れる*/
-->
</style>
}}

[check]画像表示するHTMLタグ部分

#html2(<div class="CSSのクラス名">)
&show(画像ファイル名,,画像説明);
#html2(</div>)