前言
在本文中，我们将介绍如何使用HTML、CSS和JavaScript创建一个3D相册。这个相册将会展示一系列的照片，并且每个照片都会以3D效果呈现，使得整个相册更加生动和有趣。
废话不多活直接上效果图：
编辑
代码
1. HTML结构
先，我们需要创建一个HTML文件，用于存放我们的相册内容。在这个文件中，我们将使用<div>标签来创建一个容器，用于存放所有的照片。每个照片都将被包裹在一个<div>标签中，并且我们将为每个照片添加一个唯一的ID,以便于后续的JavaScript操作。
注：需要自行修改和添加图片路径
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D照片墙动画</title> <link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <div id="drag-container"> <div id="spin-container"> <!-- 在这里添加图片或者mp4视频，最多13个 --> <img src="图片或者mp4" alt=""> <img src="图片或者mp4" alt=""> <img src="图片或者mp4" alt=""> <img src="图片或者mp4" alt=""> <img src="图片或者mp4" alt=""> <img src="图片或者mp4" alt=""> <img src="图片或者mp4" alt=""> <!-- 带链接的图片 --> <!-- <a target="_blank" href="7.png"> <img src="7.png" alt=""> </a> --> <!-- 示例视频 --> <video controls autoplay="autoplay" loop> <source src="demo.mp4" type="video/mp4"> </video> <!-- 背景文字描述 --> <p>3D 相册</p> </div> <div id="ground"></div> </div> <div id="music-container"></div> <script src="./script.js"></script> </body> </html>
2. JavaScript交互
我们需要创建一个JavaScript文件(例如：scripts.js),用于实现照片的切换和3D效果。在这个文件中，我们将使用JavaScript来动态生成照片元素，并为每个照片添加点击事件，以便于切换到下一张照片。同时，我们还将使用CSS变量来实现动态调整照片的大小和位置。
自行替换mp3文件，博主这里就不多言了
// 全局参数定义 var radius = 240; // 相册的半径 var autoRotate = true; // 是否自动旋转 var rotateSpeed = -60; // 旋转速度 var imgWidth = 120; // 照片宽度 (unit: px) var imgHeight = 170; // 照片高度 (unit: px) //背景音乐地址 var bgMusicURL = '音乐地址 '; var bgMusicControls = true; //是否显示背景音乐播放器 // ===================== start ======================= setTimeout(init, 1000); var odrag = document.getElementById('drag-container'); var ospin = document.getElementById('spin-container'); var aImg = ospin.getElementsByTagName('img'); var aVid = ospin.getElementsByTagName('video'); var aEle = [...aImg, ...aVid]; // Size of images ospin.style.width = imgWidth + "px"; ospin.style.height = imgHeight + "px"; var ground = document.getElementById('ground'); ground.style.width = radius * 3 + "px"; ground.style.height = radius * 3 + "px"; // 相册初始化时候的动画特效 function init(delayTime) { for (var i = 0; i < aEle.length; i++) { aEle[i].style.transform = "rotateY(" + (i * (360 / aEle.length)) + "deg) translateZ(" + radius + "px)"; aEle[i].style.transition = "transform 1s"; aEle[i].style.transitionDelay = delayTime || (aEle.length - i) / 4 + "s"; } } function applyTranform(obj) { // Constrain the angle of camera (between 0 and 180) if (tY > 180) tY = 180; if (tY < 0) tY = 0; // Apply the angle obj.style.transform = "rotateX(" + (-tY) + "deg) rotateY(" + (tX) + "deg)"; } function playSpin(yes) { ospin.style.animationPlayState = (yes ? 'running' : 'paused'); } var sX, sY, nX, nY, desX = 0, desY = 0, tX = 0, tY = 10; // auto spin if (autoRotate) { var animationName = (rotateSpeed > 0 ? 'spin' : 'spinRevert'); ospin.style.animation = `${animationName} ${Math.abs(rotateSpeed)}s infinite linear`; } // add background music if (bgMusicURL) { document.getElementById('music-container').innerHTML += ` <audio src="${bgMusicURL}" ${bgMusicControls? 'controls': ''} autoplay loop> <p>If you are reading this, it is because your browser does not support the audio element.</p> </audio> `; } // setup events document.onpointerdown = function(e) { clearInterval(odrag.timer); e = e || window.event; var sX = e.clientX, sY = e.clientY; this.onpointermove = function(e) { e = e || window.event; var nX = e.clientX, nY = e.clientY; desX = nX - sX; desY = nY - sY; tX += desX * 0.1; tY += desY * 0.1; applyTranform(odrag); sX = nX; sY = nY; }; this.onpointerup = function(e) { odrag.timer = setInterval(function() { desX *= 0.95; desY *= 0.95; tX += desX * 0.1; tY += desY * 0.1; applyTranform(odrag); playSpin(false); if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) { clearInterval(odrag.timer); playSpin(true); } }, 17); this.onpointermove = this.onpointerup = null; }; return false; }; document.onmousewheel = function(e) { e = e || window.event; var d = e.wheelDelta / 20 || -e.detail; radius += d; init(1); };
3.CSS样式
接下来，我们需要创建一个CSS文件(例如：styles.css),用于设置相册的样式。在这个文件中，我们将使用CSS3的transform属性来实现3D效果。同时，我们还需要设置一些基本的样式，如背景颜色、图片大小等。
* { margin: 0; padding: 0; } html, body { height: 100%; /* for touch screen */ touch-action: none; } body { overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; background: #111; -webkit-perspective: 1000px; perspective: 1000px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } #drag-container, #spin-container { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; margin: auto; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(-10deg); transform: rotateX(-10deg); } #drag-container img, #drag-container video { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 200px; font-size: 50px; text-align: center; -webkit-box-shadow: 0 0 8px #fff; box-shadow: 0 0 8px #fff; -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005); } #drag-container img:hover, #drag-container video:hover { -webkit-box-shadow: 0 0 15px #fffd; box-shadow: 0 0 15px #fffd; -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0007); } #drag-container p { font-family: Serif; position: absolute; top: 100%; left: 50%; -webkit-transform: translate(-50%, -50%) rotateX(90deg); transform: translate(-50%, -50%) rotateX(90deg); color: #fff; } #ground { width: 900px; height: 900px; position: absolute; top: 100%; left: 50%; -webkit-transform: translate(-50%, -50%) rotateX(90deg); transform: translate(-50%, -50%) rotateX(90deg); background: -webkit-radial-gradient(center center, farthest-side, #9993, transparent); } #music-container { position: absolute; top: 0; left: 0; } @-webkit-keyframes spin { from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } to { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } } @keyframes spin { from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } to { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } } @-webkit-keyframes spinRevert { from { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } to { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } @keyframes spinRevert { from { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } to { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } }
