3D旋转卡片效果

变形效果

4.8 (124 评价)

使用CSS transform属性创建平滑的3D旋转效果，适用于卡片翻转展示。这种效果常用于产品展示、游戏卡牌、信息卡片等场景，可以在有限空间内展示更多信息。

效果预览

正面内容

背面内容

将鼠标悬停在卡片上查看效果

代码示例

HTML

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

CSS

/* 3D卡片效果 */
.flip-card-container {
  perspective: 1000px;  /* 设置3D视角距离 */
  width: 300px;
  height: 200px;
  margin: 0 auto;
}

.flip-card {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;  /* 设置过渡动画时间 */
  transform-style: preserve-3d;  /* 保持3D空间效果 */
  cursor: pointer;
}

/* 悬停时旋转卡片 */
.flip-card-container:hover .flip-card {
  transform: rotateY(180deg);  /* Y轴旋转180度 */
}

/* 卡片正反面共同样式 */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;  /* Safari兼容性 */
  backface-visibility: hidden;  /* 隐藏背面 */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 正面样式 */
.flip-card-front {
  background-color: #8BC34A;
  color: white;
}

/* 背面样式 */
.flip-card-back {
  background-color: #4CAF50;
  color: white;
  transform: rotateY(180deg);  /* 默认先旋转180度 */
}

使用说明

核心原理

3D旋转卡片效果主要利用了CSS的以下几个属性：

perspective: 设置3D视角距离，值越小效果越明显
transform-style: preserve-3d: 保持子元素在3D空间中
backface-visibility: hidden: 隐藏元素背面
transform: rotateY(180deg): Y轴旋转180度

自定义选项

你可以根据需要自定义以下选项：

调整perspective值改变3D效果强度
修改transition时间控制动画速度
更改rotateY为rotateX实现上下翻转
添加box-shadow增强立体感
自定义正反面的样式、内容和布局

浏览器兼容性

此效果在现代浏览器中表现良好，但在一些旧版浏览器中可能需要添加前缀：

Chrome

Firefox

Safari

Edge

变体示例

点击触发翻转

/* 将悬停改为点击触发 */
.flip-card.flipped {
  transform: rotateY(180deg);
}

/* JavaScript */
document.querySelector('.flip-card').addEventListener('click', function() {
  this.classList.toggle('flipped');
});

垂直翻转效果

/* 将水平翻转改为垂直翻转 */
.flip-card-container:hover .flip-card {
  transform: rotateX(180deg);  /* X轴旋转180度 */
}

.flip-card-back {
  transform: rotateX(180deg);  /* 默认先旋转180度 */
}

应用场景

产品展示

正面展示产品图片，背面显示产品详细信息和购买按钮。

团队介绍

正面展示团队成员照片，背面显示个人简介和联系方式。

问答卡片

正面显示问题，背面显示答案，适用于教育和学习类网站。

用户评论

24条评论

王小明

3天前

这个效果太棒了！我用在了我的个人作品集网站上，访客反馈非常好。代码也很简洁，容易理解。

李小华

1周前

请问在IE11中有兼容性问题吗？我测试时发现在某些旧浏览器中效果不太理想。

管理员

CSS魔法盒团队

6天前

在IE11中确实存在一些兼容性问题，建议添加-ms-前缀，并考虑使用modernizr检测特性支持。我们稍后会更新一个针对旧浏览器的兼容性指南。

目录导航