「transform」でマウスオーバー時に画像を反転（3D回転）

以前求人サイトを手掛けた時に使用した、マウスオーバーの時に3D回転（反転）をする方法をメモ 。
使用時は表面に「スタッフのプロフィール写真」、裏面に「働いている様子の写真」として利用。

HTML

<ul class="list">
<li>
<a href="">
<div class="block">
<figure class="front">衆</figure>
<figure class="back">SYU</figure>
</div>
</a>
</li>
</ul>

CSS

.list li a{
	width: auto;
	height: 300px;
	display: block;
	overflow: hidden;
}
.list li a .block{
	position: relative;
	-webkit-perspective: 9999px;
	-moz-perspective: 9999px;
	perspective: 9999px;
}
.list li a:hover .block{
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	transform: rotateY(180deg);
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
}
.list li a:not(:hover) .block{
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	transform: rotateY(0deg);
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
}
.list li a .block .front,
.list li a .block .back{
	width: 300px;
	height: 300px;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.list li a .block .front{
	z-index:1;
}
.list li a .block .back{
	-webkit-transform: rotateY(-179deg);
	-moz-transform: rotateY(-179deg);
	transform: rotateY(-179deg);
}
.list li a:hover .block .front{
	z-index:0;
}

「perspective」で奥行を設定し、「transform」で縦軸（Y軸）を支点に回転。
回転速度は「transition」で設定。
「:not(:hover)」を使うと戻り（mouseout）の動きもスマートにできる。

サンプル

• 衆

  SYU