マウスを乗せると上向きに90度クルッと回転します。マウスアウトすると、元に戻ります。エフェクトとしては単純ですが、動きが小気味良いので、気に入っています。また、この動きの実装はCSS3のみによるものですが、スタイル修正とベンダープレフィックスをフリーにするためのjsが追加されています。IE11ではきれいに表示されませんが、Edgeは対応しています。

htmlソース

<div class="container">
  <ul>
    <li class="component"><a href="#" class="face" data-hover="Conifer">Conifer</a></li>
    <li class="component"><a href="#" class="face2" data-hover="コスト削減">コスト削減</a></li>
    <li class="component"><a href="#" class="face" data-hover="百万石">百万石</a></li>
    <li class="component"><a href="#" class="face2" data-hover="QRラリー">QRラリー</a></li>
    <li class="component"><a href="#" class="face" data-hover="0万石">0万石</a></li>		
  </ul>
</div>

CSSソース

.container {
	text-align: center;
	color: white;
}
.component {
	display: inline-block;
	line-height: 40px;
	perspective: 500px;
}
.face {
	display: inline-block;
	width: 80px;/*40px;*/
	color: white;
	text-decoration: none;
	background: #48f;
	cursor: default;
	transition: 0.3s;
	transform-origin: center top;
	transform-style: preserve-3d;
}
.face2 {
	display: inline-block;
	width: 100px;/*40px;*/
	color: white;
	text-decoration: none;
	background: #48f;
	cursor: default;
	transition: 0.3s;
	transform-origin: center top;
	transform-style: preserve-3d;
}
.face::after,.face2::after {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background: #26d;
	content: attr(data-hover);
	transform: rotateX(-90deg);
	transform-origin: center top;
}
.face:hover,.face:focus,
.face2:hover,.face2:focus {
	transform: rotateX(90deg) translateY(-20px);
}
.face:hover::after,.face:focus::after,
.face2:hover::after,.face2:focus::after  {
	background: #26d;
}