HTML如何让图片变3D？

纯CSS 3D变换（基础方案）

通过CSS transform属性实现静态3D效果：

<div class="photo-container">
  <img src="image.jpg" alt="3D风景图" class="3d-photo">
</div>
<p><style>
.photo-container {
perspective: 1000px; /<em> 3D透视距离 </em>/
}
.3d-photo {
transform: rotateX(15deg) rotateY(-10deg) translateZ(50px);
transition: transform 0.5s;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.3d-photo:hover {
transform: rotateX(20deg) rotateY(-15deg) translateZ(70px);
}
</style>

• perspective属性：定义观察者与z=0平面的距离，值越小3D效果越强
• rotateX/Y：沿X/Y轴旋转（单位：deg）
• translateZ：控制深度移动（正值向前，负值向后）

CSS 3D卡片悬停（中级交互）

创建响应鼠标移动的动态3D卡片：

// JavaScript动态计算旋转角度
document.querySelector('.3d-card').addEventListener('mousemove', (e) => {
  const card = e.currentTarget;
  const centerX = card.offsetWidth / 2;
  const centerY = card.offsetHeight / 2;
<p>const rotateY = (e.offsetX - centerX) / 20;
const rotateX = (centerY - e.offsetY) / 10;</p>
<p>card.style.transform = <code>rotateX(${rotateX}deg) rotateY(${rotateY}deg)</code>;
});

Three.js高级实现（WebGL方案）

通过WebGL库实现真实3D渲染：

import * as THREE from 'three';
<p>// 1. 创建场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);</p>
<p>// 2. 加载纹理
const textureLoader = new THREE.TextureLoader();
const imgTexture = textureLoader.load('texture.jpg');</p>
<p>// 3. 创建3D图片对象
const geometry = new THREE.PlaneGeometry(4, 3);
const material = new THREE.MeshBasicMaterial({ map: imgTexture });
const photoMesh = new THREE.Mesh(geometry, material);</p>
<p>// 4. 添加至场景
scene.add(photoMesh);
camera.position.z = 5;</p>
<p>// 5. 动画循环
function animate() {
requestAnimationFrame(animate);
photoMesh.rotation.x += 0.01;
photoMesh.rotation.y += 0.01;
renderer.render(scene, camera);
}

优势：支持灯光/阴影/复杂材质，性能优化建议：压缩纹理尺寸，使用GLTFLoader加载优化模型