console
<div class="card-container">
<div class="card">
<div class="front">
<p>是他,是他,就是他</p>
</div>
<div class="back">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568002109983&di=a4b787656b2fd8828aa1bc2486affd38&imgtype=0&src=http%3A%2F%2Fwx1.sinaimg.cn%2Flarge%2F521c9344ly1g5gvz0rclij20ix0an48c.jpg" alt="">
</div>
</div>
</div>
.card-container {
perspective: 1000;
display: inline-block;
margin: 20px;
text-align: center;
}
.card {
width: 360px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transform: rotate(0);
animation: move 5s infinite;
margin-bottom: 10px;
}
.card > div {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: rgba(133, 207, 241, 0.753);
backface-visibility: hidden;
transform: rotate(0, 0, 0);
color: rgb(0, 0, 0);
font-size: 24px;
}
.card .back {
background: rgba(63, 194, 187, 0.438);
transform: rotateY(180deg);
}
.card img {
width: 100%;
}
@keyframes move {
0% {
transform: rotateY(0);
}
50% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(0);
}
}