CSS/JS 3D画册实例_css js 画3d效果图
来一波效果图
<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <title>3D Gallery</title> <style> * { box-sizing: border-box; } body { margin: 0; background: #111; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; user-select: none; } .scene { perspective: 1000px; width: 600px; height: 400px; } .gallery { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transform: rotateY(0deg); } .gallery img { position: absolute; width: 320px; height: 200px; top: 100px; left: 140px; border-radius: 10px; box-shadow: 0 0 15px rgba(0,0,0,0.5); transition: transform 0.3s; } </style></head><body><div class=\"scene\"> <div class=\"gallery\" id=\"gallery\"> <img src=\"https://picsum.photos/id/1015/400/300\"> <img src=\"https://picsum.photos/id/1016/400/300\"> <img src=\"https://picsum.photos/id/1018/400/300\"> <img src=\"https://picsum.photos/id/1024/400/300\"> <img src=\"https://picsum.photos/id/1025/400/300\"> <img src=\"https://picsum.photos/id/1026/400/300\"> <img src=\"https://picsum.photos/id/1027/400/300\"> <img src=\"https://picsum.photos/id/1028/400/300\"> </div></div><script> const gallery = document.getElementById(\'gallery\'); const images = gallery.querySelectorAll(\'img\'); const count = images.length; const radius = 500; let rotateY = 0; // 初始布局 images.forEach((img, i) => { const angle = (360 / count) * i; img.style.transform = `rotateY(${angle}deg) translateZ(${radius}px)`; }); // 拖拽控制 let isDragging = false; let startX = 0; let currentRotate = 0; let velocity = 0; let lastX = 0; let lastTime = 0; let inertiaFrame = null; function updateRotation(angle) { gallery.style.transform = `rotateY(${angle}deg)`; } function onDragStart(x) { isDragging = true; startX = x; currentRotate = rotateY; velocity = 0; lastX = x; lastTime = Date.now(); cancelAnimationFrame(inertiaFrame); } function onDragMove(x) { if (!isDragging) return; const now = Date.now(); const dx = x - startX; rotateY = currentRotate + dx * 0.3; updateRotation(rotateY); // 更新速度 velocity = (x - lastX) / (now - lastTime) * 10; // px/ms lastX = x; lastTime = now; } function onDragEnd() { isDragging = false; inertiaScroll(); } function inertiaScroll() { velocity *= 0.95; if (Math.abs(velocity) > 0.01) { rotateY += velocity; updateRotation(rotateY); inertiaFrame = requestAnimationFrame(inertiaScroll); } } // 鼠标支持 document.addEventListener(\'mousedown\', e => onDragStart(e.clientX)); document.addEventListener(\'mousemove\', e => onDragMove(e.clientX)); document.addEventListener(\'mouseup\', onDragEnd); // 触摸支持 document.addEventListener(\'touchstart\', e => onDragStart(e.touches[0].clientX)); document.addEventListener(\'touchmove\', e => { e.preventDefault(); // 防止滚屏 onDragMove(e.touches[0].clientX); }, { passive: false }); document.addEventListener(\'touchend\', onDragEnd);</script></body></html>有更好的方式，欢迎留言讨论
