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

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

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

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

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

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

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

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

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

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

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

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

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

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

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