CSS如何制作悬浮卡片视差滚动？perspective差异-css教程-PHP中文网

CSS如何制作悬浮卡片视差滚动？perspective差异

蓮花仙者

发布： 2025-08-24 08:54:02

原创

897人浏览过

悬浮卡片视差滚动的性能优化技巧包括：使用transform和opacity以利用gpu加速；2. 使用will-change属性提示浏览器进行优化；3. 卡片数量多时采用虚拟滚动，仅渲染视口内元素；4. 避免在滚动事件中直接操作dom，改用requestanimationframe进行节流处理，从而减少重绘和重排，提升性能。

CSS如何制作悬浮卡片视差滚动？perspective差异

CSS制作悬浮卡片视差滚动效果，核心在于利用

perspective

登录后复制

属性创造景深，结合

transform

登录后复制

属性的

translateZ

登录后复制

实现元素在Z轴上的位移，从而模拟视差。不同

perspective

登录后复制

值会直接影响视差的强烈程度和视觉效果。

解决方案：

首先，我们需要一个包含卡片的容器，并设置

perspective

登录后复制

属性。这个属性决定了观察者距离Z=0平面的距离，数值越小，景深效果越明显，视差感越强烈。

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

<div class="container">
  <div class="card">
    <img src="image.jpg" alt="Card Image">
    <div class="content">
      <h3>Card Title</h3>
      <p>Some descriptive text here.</p>
    </div>
  </div>
</div>

登录后复制

.container {
  width: 300px;
  height: 400px;
  perspective: 500px; /* 调整这个值来改变视差效果 */
  overflow: hidden; /* 避免超出容器的内容显示 */
}

.card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d; /* 关键：保留3D转换 */
  transition: transform 0.5s ease; /* 平滑过渡 */
}

.card:hover {
  transform: rotateX(10deg) rotateY(10deg); /* 鼠标悬停时旋转 */
}

.card img {
  width: 100%;
  height: 60%;
  object-fit: cover;
  transform: translateZ(50px); /* 图片稍微突出 */
}

.card .content {
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  transform: translateZ(20px); /* 内容稍微突出 */
}

登录后复制

这里