css实现卡片内容动态切换效果

/* 定义卡片容器样式 */
.card-container {
  position: relative;
  width: 300px;
  height: 200px;
  perspective: 1000px;
}
 
/* 定义卡片样式 */
.card {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 1s;
}
 
/* 定义不同卡片背面内容的样式 */
.card-1 {
  background-color: #FF6347;
}
 
.card-2 {
  background-color: #A52A2A;
  transform: rotateY(-180deg);
}
 
/* JavaScript触发卡片翻转动画 */
function toggleCard() {
  var card = document.querySelector('.card');
  card.style.transform = 'rotateY(-180deg)';
}

这个简单的示例展示了如何使用CSS来创建一个卡片容器和卡片元素，并通过JavaScript函数toggleCard来切换卡片的可视内容。这个例子演示了如何使用CSS3的3D转换和视觉效果来创造动态的用户界面效果。