如何使用CSS实现图片的3D倾斜立体效果？

你需要的效果可以通过CSS 3D变换属性快速实现，以下是可直接运行的代码示例：

<!-- HTML结构 -->
<div class="img-3d-wrapper">
  <img src="你的图片地址" alt="示例图片">
</div>

/* CSS样式 */
.img-3d-wrapper {
  /* 透视距离，值越小3D效果越强 */
  perspective: 1000px;
  display: inline-block;
}
.img-3d-wrapper img {
  width: 300px;
  /* 开启3D空间 */
  transform-style: preserve-3d;
  /* 调整X、Y轴旋转角度实现不同方向的倾斜效果 */
  transform: rotateX(10deg) rotateY(-15deg);
  /* 添加阴影强化立体质感 */
  box-shadow: 15px 15px 30px rgba(0,0,0,0.3),
              5px 5px 15px rgba(0,0,0,0.2);
  /* 可选：添加过渡效果，hover时调整角度更丝滑 */
  transition: all 0.3s ease;
}
/* 可选hover动效 */
.img-3d-wrapper img:hover {
  transform: rotateX(5deg) rotateY(-8deg);
  box-shadow: 20px 20px 35px rgba(0,0,0,0.35),
              8px 8px 20px rgba(0,0,0,0.25);
}

参数调整说明 #

• 如果倾斜幅度不符合你的预期，直接修改transform里rotateX和rotateY的数值即可，正负值对应相反的倾斜方向
• 调整perspective的数值可以改变透视的强度，数值越小3D拉伸感越强
• 可以根据需要修改box-shadow的偏移量、模糊度和颜色，适配不同的页面风格

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