CSSで画像をマウスオーバーしたときに効果を与える小技①

2015.11.09

2015.11.10

CSS3で、動きを与える効果をつけることは最近では完全に定着してしまいました。
しかし、まだまだ予算の少ない案件では、導入されないケースが多いのが現実です。
というわけで、少し動きをつけるだけでもサイトのリッチ感が向上するCSS3の効果を、基本的な考え方を解説しながら、いくつか紹介したいと思います。

基本的に変形処理は「transform」プロパティで行う。

移動・拡大・縮小・回転・傾斜等、サイトに様々な効果を与えたい時は、基本的にCSS3の「transform」プロパティで行います。

 
transform:変形処理
 

という具合に処理を記述していきます。
それでは、一つずつ見ていきましょう。

画像をマウスオーバーで「移動」するCSS「translate」

「translate」は要素を移動できます。translate(X軸,Y軸)という書き方になります。
translateX(値),translateY(値)とすると、X軸、Y軸それぞれのみの記述ができます。

 
.photo1 img{ transition: 0.3s; } .photo1 img:hover{ -webkit-transform: translate(5px,5px); -moz-transform: translate(5px,5px); -ms-transform: translate(5px,5px); -o-transform: translate(5px,5px); transform: translate(5px,5px); }  

画像をマウスオーバーで「拡大」するCSS「scale」

「scale」は要素を拡大できます。scale(X軸倍率,Y軸倍率)という書き方になります。
scaleX(値),scaleY(値)とすると、X軸、Y軸それぞれに拡大倍率を指定できます。
例のように指定せずに書くとX,Y軸とも同倍率で拡大します。

 
.photo2 img{ transition: 0.3s; } .photo2 img:hover{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }  

画像をマウスオーバーで「回転」するCSS「rotate」

「rotate」は要素を拡大できます。rotate(角度)という書き方になります。
rotate(0deg)で、水平(X軸に平行)となります。

 
.photo3 img{ transition: 0.2s; } .photo3 img:hover{ -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -ms-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg); }  

「rotateY」で動かすと、このような動きになります。

 
.photo4 img{ transition: 0.5s; } .photo4 img:hover{ -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); }  

画像をマウスオーバーで「傾斜」するCSS「skew」

「skew」は要素を拡大できます。skew(角度)という書き方になります。
skew(0deg)で、傾斜する角度を入力します。

 
.photo5 img{ transition: 0.5s; } .photo5 img:hover{ -webkit-transform: skew(-45deg,0deg); -moz-transform: skew(-45deg,0deg); -ms-transform: skew(-45deg,0deg); -o-transform: skew(-45deg,0deg); transform: skew(-45deg,0deg); }  

さらに「transform-origin」プロパティを使用することで、変形の基準になる地点を変更できます。
初期値は、中央(x軸50%,Y軸50%の位置)にあるので、これを変更すると、変形の仕方が変わります。
「skew」だけでなく、その他の要素でも使用できます。

 
.photo6 img{ transition: 0.5s; -webkit-transform-origin: 0px 210px; -moz-transform-origin: 0px 210px; -ms-transform-origin: 0px 210px; -o-transform-origin: 0px 210px; transform-origin: 0px 210px; } .photo6 img:hover{ -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -ms-transform: skew(-20deg); -o-transform: skew(-20deg); transform: skew(-20deg); }  

数値やX,Y軸の値を変更等したり、組み合わせていろいろアレンジしてみていろいろ試してみるとよいでしょう。

KEiSoN★

インターネット・ITに将来の可能性を感じ、デジタルハリウッドオンラインスクールで、webデザインを学ぶ。
2007年よりECカート開発会社にてwebディレクター/webデザイナーとして従事。マネージャー職も務める。
2009年1月よりフリーランスのwebディレクター/Webデザイナーとして独立し、ノマドな働き方を試み始める。
過去16カ国ほど訪れ、一眼レフにその景色を収めながら時々ドローンも飛ばすなど、写真や映像のクリエイティブにも触れる。
2015年11月にスカイゴールド株式会社として法人化。
中小企業向けのWebブランディング・デザイン、Wordpressのオリジナルテーマ開発・オウンドメディア構築が得意。
国内外の様々な価値観・デザインに接触することで、幅広いクリエイティブや臨機応変にアイデアを提供する。