ホバーで回転するカード
ホバーCSSのみカード
Back
Card
ホバーするとカードが回転するアニメーションです。
実装のポイント
表面、裏面をposition: absoluteで固定配置し、rotateプロパティを用いて裏面の.backのみ180度回転させておきます。またbackface-visibility: hiddenで裏側から不透過にしています。
これをホバー時にそれぞれ180度ずつ回転させることでカードが回転したように見せています。
コード例
HTML
<div class="sampleCard">
<div class="face back">
<p>Back</p>
</div>
<div class="face front">
<p>Card</p>
</div>
</div>
CSS
.sampleCard {
--ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
.face {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
transition: rotate 0.8s var(--ease-out-cubic);
}
.front {
rotate: 0 1 0 0deg;
}
.back {
rotate: 0 1 0 180deg;
}
@media (any-hover: hover) {
&:hover {
.front {
rotate: 0 1 0 180deg;
}
.back {
rotate: 0 1 0 360deg;
}
}
}
}