WEBOPIXEL

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

Posted: 2019.01.18 / Category: HTML&CSS 

マウスオーバーすると奥行きのあるかのようにくるっと回転するフリップボタンを作ってみます。

Sponsored Link

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

HTML

タグはaタグの中にspanを入れてます。
span2つにして表裏にした方が直感的ですがマークアップ的に微妙な気がしたので、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;
}

くるっとなる動きでメインとなるのは、36〜50行目のtransformの部分です。
rotateXだけだと中心から回転するので、translateZも指定することで表裏で入れ替わるような動きになります。
translateZの数値はボタンのheightの半分の値を入れてください。