console 命令行工具 X clear

console

<body>
    <div class="card">
        <div class="face front">
            <h2>front</h2>
        </div>
        <div class="face back">
            <h2>back</h2>
        </div>
    </div>
</body>

* {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #111;
}

.card {
    position: relative;
    width: 300px;
    height: 400px;
     transform-style: preserve-3d; 
    border: 1px solid red;
}

.card .face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
     transform-style: preserve-3d; 
    display: flex;
    align-items: center;
    justify-content: center;
     backface-visibility: hidden; 
     transition: 2s ease-in-out; 
     transform: perspective(500px) rotateY(0deg); 
}

.card .face.front {
    background: #ff0;
    
}

.card:hover .face.front {
     transform: perspective(500px) rotateY(180deg); 
}

.card .face.back {
    background: #3bc2ff;
    color: #fff;
     transform: perspective(500px) rotateY(180deg); 
}

.card:hover .face.back {
     transform: perspective(500px) rotateY(360deg); 
}

.card .face h2 {
    font-size: 4em;
     text-transform: uppercase; 
     transform: translateZ(50px);
}