ホバーでくるっと要素を回す
code:index.html
<div id="my-div">
<h1>表面</h1>
<p>表面のテキスト</p>
<h1 class="hidden">裏面</h1>
<p class="hidden">裏面のテキスト</p>
</div>
code:style.css
#my-div {
/* 初期状態 */
perspective: 1000px;
transform-style: preserve-3d;
transition: transform 0.5s ease-in-out;
}
#my-div:hover {
/* マウスホバー時 */
transform: rotateY(180deg);
}
#my-div.rotated {
/* 回転後 */
transform: rotateY(180deg);
}
.hidden {
display: none;
}