CSS如何制作悬浮卡片视差效果？translateZ景深差异

星夢妙者

发布时间：2025-08-23 15:05:01

753人浏览过

来源于php中文网

原创

实现悬浮卡片视差效果的关键是利用css 3d变换中的perspective、transform-style: preserve-3d和translatez属性协同工作，1. 首先在父容器设置perspective定义观察距离，2. 卡片元素设置transform-style: preserve-3d以保持子元素的3d空间关系，3. 内部各层元素通过不同正负值的translatez建立景深层次，4. 鼠标悬停时卡片通过rotatex/y旋转，结合z轴差异放大视差，5. 所有动画仅使用transform和opacity等gpu加速属性以确保性能，6. 可配合will-change优化渲染，最终形成前景元素移动快、背景移动慢的立体悬浮效果，整个过程由css驱动且无需javascript即可完成。

CSS如何制作悬浮卡片视差效果？translateZ景深差异

CSS制作悬浮卡片视差效果，本质上是利用了CSS的3D变换特性，尤其是

translateZ

来模拟景深差异，再结合父元素的旋转来展现这种深度感。核心在于给卡片内部的不同元素赋予不同的Z轴位置，当卡片本身因为鼠标悬停而发生轻微旋转时，这些Z轴位置的差异就会被放大，形成我们所说的视差效果。

解决方案

要实现这种效果，我们需要几个关键的CSS属性协同工作。首先，你的卡片容器需要一个透视（

perspective

）属性，这就像给你的眼睛设定了一个观察点，没有它，3D效果就无从谈起。然后，卡片本身需要声明

transform-style: preserve-3d;

，这告诉浏览器，卡片内部的子元素也应该在同一个3D空间里进行变换，而不是在它们父元素变换前就被拍平。

想象一下卡片的HTML结构，通常会有一个主容器，里面是卡片本身，而卡片内部又包含了几层元素，比如背景图、标题、描述文字或者一个图标。这些内部元素就是我们操作

translateZ

的目标。

立即学习“前端免费学习笔记（深入）”；


  
    
    
      精彩标题
      这里是卡片的描述文字，它会与标题和背景产生不同的视差效果。
      @@##@@

接着是CSS部分。

.card-container {
  perspective: 1000px; /* 关键：定义视距，值越大，透视效果越弱 */
  display: flex; /* 示例布局，让卡片居中 */
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden; /* 防止溢出 */
}

.card {
  width: 300px;
  height: 400px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transform-style: preserve-3d; /* 关键：让子元素保持3D空间 */
  transition: transform 0.3s ease-out; /* 让卡片旋转更平滑 */
  position: relative;
  overflow: hidden; /* 确保内部元素不会超出卡片边界 */
}

.card:hover {
  transform: rotateY(5deg) rotateX(5deg); /* 鼠标悬停时，卡片轻微旋转 */
}

.card-bg,
.card-content,
.card-title,
.card-description,
.card-icon {
  position: absolute; /* 让所有内部元素可以自由定位 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease-out; /* 内部元素也需要过渡 */
}

/* 赋予不同的Z轴深度 */
.card-bg {
  background: linear-gradient(to top right, #6dd5ed, #2193b0);
  transform: translateZ(-50px); /* 背景推远，移动最少 */
  z-index: 1; /* 确保层级正确 */
}

.card-content {
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
  transform: translateZ(0px); /* 内容在Z轴原点，作为参考 */
  z-index: 2;
  color: white;
  text-align: center;
}

.card-title {
  transform: translateZ(30px); /* 标题拉近，移动更多 */
  font-size: 2em;
  font-weight: bold;
  z-index: 3;
}

.card-description {
  transform: translateZ(10px); /* 描述文字略微拉近 */
  margin-top: 10px;
  font-size: 0.9em;
  line-height: 1.5;
  z-index: 3;
}

.card-icon {
  width: 80px;
  height: 80px;
  transform: translateZ(60px); /* 图标拉得最近，移动最多 */
  z-index: 4;
  top: auto; /* 调整图标位置 */
  bottom: 20px;
}

当鼠标悬停在