如何用自定义CSS实现图片3D悬浮效果？能否仅靠CSS达成？

完全可以仅用CSS实现类似参考网站的图片悬停3D效果，先梳理你现有代码的问题，再给出修正后的实现方案：

现有代码的问题 #

• 开头存在多余的}，会导致CSS解析失败
• hover状态同时设置了rotate(360deg)和rotate3d()，属性冲突，且参考效果并非360度旋转，而是随鼠标位置的3D倾斜
• transform-style: preserve-3d应设置在图片的父元素或图片本身的默认状态，而非hover状态
• 过渡属性的前缀版本与标准版本时间不一致，会导致动画表现混乱

修正后的CSS实现方案 #

下面是模拟参考效果的核心代码，通过perspective创建3D空间，结合rotateX/rotateY实现悬停时的3D倾斜，同时添加阴影增强立体感：

/* 父容器设置透视，创建3D空间 */
.product_med {
  perspective: 1000px;
  display: inline-block; /* 确保容器适配图片大小 */
}

.product_med img {
  border-radius: 50%;
  transition: all 0.4s cubic-bezier(0.12, 0.65, 0.4, 1);
  transform-style: preserve-3d;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.product_med:hover img {
  /* 模拟3D倾斜效果，可根据需求调整角度 */
  transform: rotateX(10deg) rotateY(-10deg) translateZ(10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

如果想要更贴近参考网站的随鼠标位置动态调整倾斜角度的效果，仅用CSS无法完全实现（需要JS监听鼠标位置计算角度），但上述代码已经能实现类似的3D悬停视觉效果。

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