纯CSS实现3D Carousel：hover时元素位置偏移问题求助

问题现象 #

实现纯CSS 3D轮播时，需求如下：

• 轮播自动旋转
• 鼠标悬停轮播容器时停止旋转
• 悬停的轮播元素上移并放大以引导点击

但当前实现中，hover轮播元素时，元素会直接跳转到轮播中心位置，无法保持原有3D空间位置。

问题原因 #

原代码中，轮播元素的初始transform包含rotateY(calc(var(--i)*40deg)) translateZ(350px)，但hover时直接用transform: translateY(-50px) scale(1.2)覆盖了所有变换属性，导致元素丢失原有3D定位，回到容器中心。

修复代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D Carousel</title>
  <style>
    body {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      background-color: #f0f0f0;
    }
    
    .slider {
      position: relative;
      width: 200px;
      height: 200px;
      transform-style: preserve-3d;
      animation: rotate 30s linear infinite;
    }
    
    @keyframes rotate {
      0% {
        transform: perspective(1000px) rotateY(0deg);
      }
      100% {
        transform: perspective(1000px) rotateY(360deg);
      }
    }
    
    .slider div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform-origin: center;
      transform-style: preserve-3d;
      transform: rotateY(calc(var(--i)*40deg)) translateZ(350px);
      background-color: black;
      transition: transform 0.5s ease;
    }
    
    .slider img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .slider div:hover {
      /* 保留原有3D变换，叠加平移和缩放效果 */
      transform: rotateY(calc(var(--i)*40deg)) translateZ(350px) translateY(-50px) scale(1.2);
    }
    
    .slider:hover {
      animation-play-state: paused;
    }
  </style>
</head>

<body>
  <div class="slider">
    <div style="--i:1"><img src="https://picsum.photos/200/200?random=1"></div>
    <div style="--i:2"><img src="https://picsum.photos/200/200?random=2"></div>
    <div style="--i:3"><img src="https://picsum.photos/200/200?random=3"></div>
    <div style="--i:4"><img src="https://picsum.photos/200/200?random=4"></div>
    <div style="--i:5"><img src="https://picsum.photos/200/200?random=5"></div>
    <div style="--i:6"><img src="https://picsum.photos/200/200?random=6"></div>
    <div style="--i:7"><img src="https://picsum.photos/200/200?random=7"></div>
    <div style="--i:8"><img src="https://picsum.photos/200/200?random=8"></div>
    <div style="--i:9"><img src="https://picsum.photos/200/200?random=9"></div>
  </div>
</body>

</html>

关键修改说明 #

1. 保留3D空间定位：在hover状态的transform中，先保留初始的旋转和Z轴平移属性，再叠加Y轴平移和缩放效果，确保元素不脱离原有3D轨道。
2. 优化过渡流畅度：将过渡时间从2s调整为0.5s，让hover交互更自然。
3. 补充占位图片：添加随机图片便于直接预览效果。

内容的提问来源于stack exchange，提问作者Arncil