有趣的css - 卡片翻转效果

/* 定义基本的卡片容器样式 */
.card-container {
  perspective: 1000px; /* 创建3D效果 */
}
 
/* 定义卡片样式 */
.card {
  width: 100%; /* 卡片宽度 */
  height: 200px; /* 卡片高度 */
  cursor: pointer; /* 鼠标悬停时显示指针 */
  position: relative;
  transition: transform 1s; /* 过渡动画 */
  transform-style: preserve-3d; /* 使用3D空间 */
}
 
/* 定义卡片背面样式 */
.card .back {
  position: absolute; /* 绝对定位 */
  width: 100%; /* 宽度与卡片相同 */
  height: 100%; /* 高度与卡片相同 */
  backface-visibility: hidden; /* 背面不可见 */
  background: #FF4136; /* 背景颜色 */
  transform: rotateX(180deg); /* X轴旋转180度 */
}
 
/* 鼠标悬停时卡片翻转 */
.card:hover {
  transform: rotateX(180deg);
}

这段代码展示了如何使用CSS创建一个简单的卡片翻转效果。当用户将鼠标悬停在卡片上时，卡片将沿X轴旋转180度，显示出背面的内容。这是一个很好的入门级教学示例，展示了3D空间的基本概念和过渡效果的应用。