マウスホバーでクルッと裏返るCSSアニメーションサンプル

2021-12-25CSS アニメーション サンプル集,CSS

CSSだけでマウスホバー時に画像などのHTML要素がクルッと裏返るフリップアニメーションのサンプルを紹介しています。

マウスホバーで裏返るCSSアニメーション

フリップアニメーションを出来るだけシンプルに作成した動作サンプルとサンプルコードになります。

サンプルでは、要素にカーソルを合わせると180度回転して裏返ります。

See the Pen CSS | Mouse hover VS Display none ROUND 1 by yochans (@yochans) on CodePen.

HTMLには裏返すアイテムとなる「.item」、その中に前面になる「.front」、背面になる「.back」を設置しています。

前面と背面のdivにてカスタマイズは簡単におこなう事が可能です。

<div class="item">
	<div class="front"><p>FRONT</p></div>
	<div class="back"><p>BACK</p></div>
</div>

このサンプルコードでフリップアニメーションに使っている重要なコードは transform-style: preserve-3d 、backface-visibility: hidden、 transition: 1s、transform: rotateY(180deg) 、z-index: 2 になります。

transform-style: preserve-3d は要素を3D空間として配置します。
backface-visibility: hidden は要素が背を向いている時に表示の反転を解除します。
transition: 1s は回転するアニメーション時間を指定します。
transform: rotateY(180deg) は180度要素を縦軸回転させます。
z-index: 2 は前面と背面の表示順序を入れ替えます。（HTML上では逆なので）

.item {
	position: relative;
	width: 100px;
	height: 100px;
	transform-style: preserve-3d;
	transition: 1s;
}

.item:hover {
	transform: rotateY(180deg);
}

.item div {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	/* for text */
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	font-size: 22px;
}

.front {
	background: #4169e1;
	z-index: 2;
}

.back {
	background: #dc143c;
	transform: rotateY(180deg);
}