CSS3でくるっと回転するフリップボタンナビゲーション

See the Pen Flip Pen Navigation by webopixel (@webopixel) on CodePen.

HTML

タグはaタグの中にspanを入れてます。
span２つにして表裏にした方が直感的ですがマークアップ的に微妙な気がしたので、aにtitle属性を設定してCSSの擬似要素で裏側のボタンスタイルを作成することにします。

html

<nav class="flip-nav">
	<ul>
		<li class="nav01">
			<a href="#" class="flip-btn" title="HOME">
				<span>HOME</span>
			</a>
		</li>
		<li class="nav02">
			<a href="#" class="flip-btn" title="ABOUT">
				<span>ABOUT</span>
			</a>
		</li>
		<li class="nav03">
			<a href="#" class="flip-btn" title="WORKS">
				<span>WORKS</span>
			</a>
		</li>
		<li class="nav04">
			<a href="#" class="flip-btn" title="CONTACT">
				<span>CONTACT</span>
			</a>
		</li>
	</ul>
</nav>

CSS

拡大するときはscaleだと荒くなってしまうので、matrixを使用するといい感じです。

CSS

nav.flip-nav {
	margin: 30px auto;
	width: 800px;
	max-width: 100%;
}

nav.flip-nav > ul {
	list-style: none;
	display: flex;

}
nav.flip-nav > ul > li {
	width: 100%;
}
.flip-btn {
	font-size: 16px;
	height: 60px;
	line-height: 60px;
	display: block;
	position: relative;
	text-decoration: none;
}

.flip-btn:after,
.flip-btn span {
	display: block;
	position: absolute;
	background: #bbb;
	text-align: center;
	color: #fff;
	width: 100%;
	height: 100%;
	transition: transform .3s;
}

/* 表側 */
.flip-btn span {
	transform: rotateX(0deg) translateZ(30px);
}
.flip-btn:hover span {
	transform: rotateX(-90deg) translateZ(30px);
}
/* 裏側 */
.flip-btn:after {
	content: attr(title);
	transform: rotateX(90deg) translateZ(30px);
}
.flip-btn:hover:after {
	transform: rotateX(0deg) translateZ(30px);
}


.nav01 span {
	background: #F47BBC;
}
.nav01 .flip-btn:after {
	background: #AF5686;
}
.nav02 span {
	background: #7BA0F4;
}
.nav02 .flip-btn:after {
	background: #5A76B5;
}
.nav03 span {
	background: #77C944;
}
.nav03 .flip-btn:after {
	background: #5A9834;
}
.nav04 span {
	background: #E0A759;
}
.nav04 .flip-btn:after {
	background: #A2783E;
}