如何在CSS中制作卡片旋转动画_transform rotate @keyframes实现效果

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

.card {
  width: 200px;
  height: 300px;
  position: relative;
  perspective: 1000px; /* 创建3D透视感 */
}
<p>.card-face {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden; /<em> 隐藏背面时不可见 </em>/
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
}</p><p>.front {
background: #3498db;
color: white;
}</p><p>.back {
background: #e74c3c;
color: white;
transform: rotateY(180deg); /<em> 背面初始旋转180度 </em>/
}</p>

@keyframes cardFlip {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}
<p>.card:hover .front {
animation: cardFlip 0.6s forwards;
}</p><p>.card:hover .back {
animation: cardFlip 0.6s forwards;
animation-delay: 0.6s; /<em> 等正面翻完再显示背面 </em>/
}</p>

.card-container {
  width: 200px;
  height: 300px;
  perspective: 1000px;
}
<p>.card {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s ease;
}</p><p>.card:hover {
transform: rotateY(180deg);
}</p><p>.front, .back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
}</p><p>.front {
background: #3498db;
color: white;
}</p><p>.back {
background: #e74c3c;
color: white;
transform: rotateY(180deg);
}</p>

@keyframes flipIn {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(180deg);
  }
}
<p>.card.animated {
animation: flipIn 0.6s ease forwards;
}</p>

document.querySelector('.card').addEventListener('click', function() {
  this.classList.toggle('animated');
});