如何通过css实现卡片翻转动画

<div class="card">
  <div class="card-face front">正面内容</div>
  <div class="card-face back">背面内容</div>
</div>

.card {
  width: 200px;
  height: 300px;
  perspective: 1000px; /* 创建3D透视感 */
}
<p>.card-face {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden; /<em> 关键：隐藏背面 </em>/
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
transition: transform 0.6s ease;
}</p><p>.front {
background: #fff;
z-index: 2;
}</p><p>.back {
background: #007bff;
color: white;
transform: rotateY(180deg); /<em> 背面初始旋转180度 </em>/
}</p>

.card:hover .front {
  transform: rotateY(-180deg);
}
<p>.card:hover .back {
transform: rotateY(0deg);
}
</font></font></p><p>或者统一控制父级更简洁：</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2071">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680155912342.png" alt="AI卡通生成器">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2071">AI卡通生成器</a>
                            <p>免费在线AI卡通图片生成器 | 一键将图片或文本转换成精美卡通形象</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="AI卡通生成器">
                                <span>51</span>
                            </div>
                        </div>
                        <a href="/ai/2071" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="AI卡通生成器">
                        </a>
                    </div>
                <font face="Courier New"><pre class="brush:php;toolbar:false;">
.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d; /* 保持3D空间 */
}
<p>.card:hover .card-inner {
transform: rotateY(180deg);
}</p>

<div class="card">
  <div class="card-inner">
    <div class="card-face front">正面</div>
    <div class="card-face back">背面</div>
  </div>
</div>

// JS 示例
document.querySelector('.card').addEventListener('click', function() {
  this.classList.toggle('flipped');
});

.card.flipped .card-inner {
  transform: rotateY(180deg);
}