html
<section class="box">
<div class="back">永远的神</div>
<div class="front">吉吉国王</div>
</section>
css
* {
padding: 0;
margin: 0;
}
.box {
position: relative;
/* 自绝父相 */
width: 100px;
height: 100px;
margin: 100px auto;
text-align: center;
border-radius: 50%;
line-height: 100px;
transition: all 1s;
transform-style: preserve-3d;
/* 3d呈现,让背后盒子立体呈现,不然永远是前面一个盒子朝向我们 */
cursor: pointer;
animation: rotate 2s linear infinite forwards;
}
.box>div {
position: absolute;
top: 0;
/* 让子盒子重叠一起 */
width: 100%;
height: 100%;
border-radius: 50%;
}
.front {
background: blue;
}
.back {
background: blueviolet;
transform: rotateY(180deg);
/* 这里让back盒的先翻转180在front的后面 */
}
.box:hover {
animation-play-state: paused;
/* 悬停事件,使得整个父盒子旋转动画停止 */
}
@keyframes rotate {
from {
transform: rotateY(0);
}
to {
transform: rotateY(360deg);
}
}