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軸の値を変更等したり、組み合わせていろいろアレンジしてみていろいろ試してみるとよいでしょう。

bodyタグにページ毎にidを振る方法【WordPress】

「Emmet」でコーディング作業を効率化しよう。-CSS編-...