SOURCE

console 命令行工具 X clear

                    
>
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);
    }
}