文章目录1. 准备工作2. 先搭 HTML 结构3. CSS 核心让平面变成立方体3.1 基础样式3.2 容器设置景深3.3 立方体开启 3D 模式3.4 六个面的位置3.5 美化每个面4. 动画让魔方转起来5. 完整代码6. 玩转自定义7. 结语*PS如果你喜欢这种“小白也能看懂”系列别忘了点赞收藏我会继续分享更多简单有趣的前端小项目。*大家好我是你们的博主。今天我们要用 HTML 和 CSS 做一个超酷的3D 魔方旋转相册不仅能展示照片还能自动旋转看起来就像科幻电影里的全息投影最关键的是——完全不需要 JavaScript只用 CSS 就能搞定。先来看看最终效果脑补一下一个透明的立方体六个面各有一张图片在空间中优雅地旋转背景是动态的 GIF。是不是很想动手试试跟着我一步步来保证你能看懂、能做出属于自己的 3D 相册。1. 准备工作一个浏览器Chrome、Firefox、Edge 都可以6 张你喜欢的图片最好是正方形或者用 CSS 调整一个文本编辑器VS Code、Sublime 甚至记事本都行可选一张动态背景图.gif 格式也可以换成纯色我假设你已经把图片放在了项目文件夹的images目录下分别命名为1.jpeg到6.jpeg。背景图叫bg3.gif。2. 先搭 HTML 结构HTML 非常简单就三层结构divclasscontainer!-- 容器提供3D视角 --divclasscube!-- 立方体旋转的整体 --divclassface front!-- 六个面 --imgsrc./images/1.jpeg/divdivclassface backimgsrc./images/2.jpeg/div!-- 还有 left, right, top, bottom 四个面 --/div/divcontainer相当于一个舞台决定了我们看这个魔方的距离和角度。cube是真正的 3D 物体它里面的所有子元素都会以 3D 方式排列。每个face就是立方体的一个面里面放一张图片。3. CSS 核心让平面变成立方体这是最难理解但也最有趣的部分。我们先从整体样式开始。3.1 基础样式让页面全屏背景图铺满并且把魔方放在正中间html, body{width:100vw;height:100vh;background-image:url(./images/bg3.gif);/* 动态背景 */background-size:100% 100%;display:flex;align-items:center;justify-content:center;}3.2 容器设置景深.container{perspective:800px;/* 视距数值越小效果越夸张 */width:400px;height:400px;position:relative;margin:0 auto;animation:scale 3s ease;/* 一个简单的入场缩放动画 */}perspective是关键它让里面的子元素产生近大远小的透视感没有它3D 就“平”了。3.3 立方体开启 3D 模式.cube{position:absolute;width:100%;height:100%;transform-style:preserve-3d;/* 重点让子元素保留3D位置 */animation:rotate 10s linear infinite;/* 整体旋转动画 */}transform-style: preserve-3d告诉浏览器里面的子元素不是平面的而是有空间位置的。这样我们才能把六个面拼成立方体。3.4 六个面的位置每个面都是一个400x400的方块默认都重叠在立方体的中心。我们需要用transform把它们移动到对应的位置。先看前、后、左、右、上、下六个面的移动规律前面沿 Z 轴向前移动 200px因为边长 400一半就是 200.front{transform:translateZ(200px);}后面先旋转 180° 让正面向后再向后移动 200px.back{transform:rotateY(180deg)translateZ(200px);}左面先绕 Y 轴旋转 -90°让面向左再沿 Z 轴移动 200px注意旋转后坐标轴方向变了但“向前”依然是从面自己的正面出发.left{transform:rotateY(-90deg)translateZ(200px);}右面绕 Y 轴转 90°再移动.right{transform:rotateY(90deg)translateZ(200px);}上面绕 X 轴转 90°再移动.top{transform:rotateX(90deg)translateZ(200px);}下面绕 X 轴转 -90°再移动.bottom{transform:rotateX(-90deg)translateZ(200px);}是不是发现规律了所有面的translateZ都是正 200px因为每个面都是把自己从中心“推”出去。旋转只是为了改变推的方向。3.5 美化每个面为了让立方体有“玻璃”质感我们给每个面加上半透明背景和黑色边框并且把图片稍微调整一下位置防止图片变形.face{position:absolute;width:400px;height:400px;overflow:hidden;/* 防止图片溢出 */border:2px solid #000;background-color:rgba(255,255,255,0.8);}.face img{height:100%;/* 让图片高度撑满宽度按比例 */margin-left:-20%;/* 左移一点让图片居中裁剪可根据图片调整 */}这里margin-left: -20%是我为了适配我的图片比例做的调整如果你的图片是正方形可以直接width: 100%; height: auto;或者object-fit: cover;。4. 动画让魔方转起来我们定义了两个动画scale魔方出现时从 0.5 倍放大到 1 倍像一个呼吸的感觉。rotate让魔方同时绕 X 轴和 Y 轴旋转 360°形成无死角的旋转。keyframesscale{0%{transform:scale(0.5);}100%{transform:scale(1);}}keyframesrotate{0%{transform:rotateX(0deg)rotateY(0deg);}100%{transform:rotateX(360deg)rotateY(360deg);}}把rotate动画挂到.cube上它就永远转下去啦。5. 完整代码为了方便你复制我把所有代码整理在一起记得改图片路径哦!DOCTYPEhtmlhtmllangzhheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title3D 魔方旋转相册/titlestyle/* 你的样式 */html, body{width:100vw;height:100vh;background-image:url(./images/bg3.gif);background-size:100% 100%;display:flex;align-items:center;justify-content:center;margin:0;overflow:hidden;}.container{perspective:800px;width:400px;height:400px;position:relative;animation:scale 3s ease;}.cube{position:absolute;width:100%;height:100%;transform-style:preserve-3d;animation:rotate 10s linear infinite;}.face{position:absolute;width:400px;height:400px;overflow:hidden;border:2px solid #000;background-color:rgba(255,255,255,0.8);}.face img{height:100%;margin-left:-20%;}.front{transform:translateZ(200px);}.back{transform:rotateY(180deg)translateZ(200px);}.left{transform:rotateY(-90deg)translateZ(200px);}.right{transform:rotateY(90deg)translateZ(200px);}.top{transform:rotateX(90deg)translateZ(200px);}.bottom{transform:rotateX(-90deg)translateZ(200px);}keyframesscale{0%{transform:scale(0.5);}100%{transform:scale(1);}}keyframesrotate{0%{transform:rotateX(0deg)rotateY(0deg);}100%{transform:rotateX(360deg)rotateY(360deg);}}/style/headbodydivclasscontainerdivclasscubedivclassface frontimgsrc./images/1.jpegalt/divdivclassface backimgsrc./images/2.jpegalt/divdivclassface leftimgsrc./images/3.jpegalt/divdivclassface rightimgsrc./images/4.jpegalt/divdivclassface topimgsrc./images/5.jpegalt/divdivclassface bottomimgsrc./images/6.jpegalt/div/div/div/body/html6. 玩转自定义这个相册就像一个基础模板你可以随意修改换图片把src改成你自己的图片注意尺寸比例如果图片变形可以调整img的object-fit属性。改大小魔方是400x400如果你想做大一点可以同时修改.container、.face的宽高以及translateZ的值保持为边长的一半。改旋转方向在keyframes rotate里可以只让绕 Y 轴转比如transform: rotateY(360deg);或者改成相反方向。加速/减速修改动画时间比如animation: rotate 5s linear infinite;会转得更快。去掉背景图直接删掉background-image换成纯色或渐变色。增加交互如果你会一点 JavaScript可以给魔方加上鼠标拖动旋转的效果那样就更像真实的魔方了。7. 结语看只用几行 CSS 就能做出这么炫酷的 3D 效果是不是很有成就感其实 3D 变换的原理并不复杂关键是理解坐标系和变换顺序。你可以试着修改每个面的旋转角度甚至做一个多层的复杂结构比如把每个面再拆成 3x3 的小格子做成真正的“魔方”。如果你做出了自己的版本欢迎在评论区分享链接我们一起交流。下期再见PS如果你喜欢这种“小白也能看懂”系列别忘了点赞收藏我会继续分享更多简单有趣的前端小项目。如果这篇这篇文章对您有帮助关注、点赞、收藏三连支持一下。有疑问或想法评论区见。我们下期再见。
前端·小白也能看懂系列：3D魔方旋转相册
文章目录1. 准备工作2. 先搭 HTML 结构3. CSS 核心让平面变成立方体3.1 基础样式3.2 容器设置景深3.3 立方体开启 3D 模式3.4 六个面的位置3.5 美化每个面4. 动画让魔方转起来5. 完整代码6. 玩转自定义7. 结语*PS如果你喜欢这种“小白也能看懂”系列别忘了点赞收藏我会继续分享更多简单有趣的前端小项目。*大家好我是你们的博主。今天我们要用 HTML 和 CSS 做一个超酷的3D 魔方旋转相册不仅能展示照片还能自动旋转看起来就像科幻电影里的全息投影最关键的是——完全不需要 JavaScript只用 CSS 就能搞定。先来看看最终效果脑补一下一个透明的立方体六个面各有一张图片在空间中优雅地旋转背景是动态的 GIF。是不是很想动手试试跟着我一步步来保证你能看懂、能做出属于自己的 3D 相册。1. 准备工作一个浏览器Chrome、Firefox、Edge 都可以6 张你喜欢的图片最好是正方形或者用 CSS 调整一个文本编辑器VS Code、Sublime 甚至记事本都行可选一张动态背景图.gif 格式也可以换成纯色我假设你已经把图片放在了项目文件夹的images目录下分别命名为1.jpeg到6.jpeg。背景图叫bg3.gif。2. 先搭 HTML 结构HTML 非常简单就三层结构divclasscontainer!-- 容器提供3D视角 --divclasscube!-- 立方体旋转的整体 --divclassface front!-- 六个面 --imgsrc./images/1.jpeg/divdivclassface backimgsrc./images/2.jpeg/div!-- 还有 left, right, top, bottom 四个面 --/div/divcontainer相当于一个舞台决定了我们看这个魔方的距离和角度。cube是真正的 3D 物体它里面的所有子元素都会以 3D 方式排列。每个face就是立方体的一个面里面放一张图片。3. CSS 核心让平面变成立方体这是最难理解但也最有趣的部分。我们先从整体样式开始。3.1 基础样式让页面全屏背景图铺满并且把魔方放在正中间html, body{width:100vw;height:100vh;background-image:url(./images/bg3.gif);/* 动态背景 */background-size:100% 100%;display:flex;align-items:center;justify-content:center;}3.2 容器设置景深.container{perspective:800px;/* 视距数值越小效果越夸张 */width:400px;height:400px;position:relative;margin:0 auto;animation:scale 3s ease;/* 一个简单的入场缩放动画 */}perspective是关键它让里面的子元素产生近大远小的透视感没有它3D 就“平”了。3.3 立方体开启 3D 模式.cube{position:absolute;width:100%;height:100%;transform-style:preserve-3d;/* 重点让子元素保留3D位置 */animation:rotate 10s linear infinite;/* 整体旋转动画 */}transform-style: preserve-3d告诉浏览器里面的子元素不是平面的而是有空间位置的。这样我们才能把六个面拼成立方体。3.4 六个面的位置每个面都是一个400x400的方块默认都重叠在立方体的中心。我们需要用transform把它们移动到对应的位置。先看前、后、左、右、上、下六个面的移动规律前面沿 Z 轴向前移动 200px因为边长 400一半就是 200.front{transform:translateZ(200px);}后面先旋转 180° 让正面向后再向后移动 200px.back{transform:rotateY(180deg)translateZ(200px);}左面先绕 Y 轴旋转 -90°让面向左再沿 Z 轴移动 200px注意旋转后坐标轴方向变了但“向前”依然是从面自己的正面出发.left{transform:rotateY(-90deg)translateZ(200px);}右面绕 Y 轴转 90°再移动.right{transform:rotateY(90deg)translateZ(200px);}上面绕 X 轴转 90°再移动.top{transform:rotateX(90deg)translateZ(200px);}下面绕 X 轴转 -90°再移动.bottom{transform:rotateX(-90deg)translateZ(200px);}是不是发现规律了所有面的translateZ都是正 200px因为每个面都是把自己从中心“推”出去。旋转只是为了改变推的方向。3.5 美化每个面为了让立方体有“玻璃”质感我们给每个面加上半透明背景和黑色边框并且把图片稍微调整一下位置防止图片变形.face{position:absolute;width:400px;height:400px;overflow:hidden;/* 防止图片溢出 */border:2px solid #000;background-color:rgba(255,255,255,0.8);}.face img{height:100%;/* 让图片高度撑满宽度按比例 */margin-left:-20%;/* 左移一点让图片居中裁剪可根据图片调整 */}这里margin-left: -20%是我为了适配我的图片比例做的调整如果你的图片是正方形可以直接width: 100%; height: auto;或者object-fit: cover;。4. 动画让魔方转起来我们定义了两个动画scale魔方出现时从 0.5 倍放大到 1 倍像一个呼吸的感觉。rotate让魔方同时绕 X 轴和 Y 轴旋转 360°形成无死角的旋转。keyframesscale{0%{transform:scale(0.5);}100%{transform:scale(1);}}keyframesrotate{0%{transform:rotateX(0deg)rotateY(0deg);}100%{transform:rotateX(360deg)rotateY(360deg);}}把rotate动画挂到.cube上它就永远转下去啦。5. 完整代码为了方便你复制我把所有代码整理在一起记得改图片路径哦!DOCTYPEhtmlhtmllangzhheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title3D 魔方旋转相册/titlestyle/* 你的样式 */html, body{width:100vw;height:100vh;background-image:url(./images/bg3.gif);background-size:100% 100%;display:flex;align-items:center;justify-content:center;margin:0;overflow:hidden;}.container{perspective:800px;width:400px;height:400px;position:relative;animation:scale 3s ease;}.cube{position:absolute;width:100%;height:100%;transform-style:preserve-3d;animation:rotate 10s linear infinite;}.face{position:absolute;width:400px;height:400px;overflow:hidden;border:2px solid #000;background-color:rgba(255,255,255,0.8);}.face img{height:100%;margin-left:-20%;}.front{transform:translateZ(200px);}.back{transform:rotateY(180deg)translateZ(200px);}.left{transform:rotateY(-90deg)translateZ(200px);}.right{transform:rotateY(90deg)translateZ(200px);}.top{transform:rotateX(90deg)translateZ(200px);}.bottom{transform:rotateX(-90deg)translateZ(200px);}keyframesscale{0%{transform:scale(0.5);}100%{transform:scale(1);}}keyframesrotate{0%{transform:rotateX(0deg)rotateY(0deg);}100%{transform:rotateX(360deg)rotateY(360deg);}}/style/headbodydivclasscontainerdivclasscubedivclassface frontimgsrc./images/1.jpegalt/divdivclassface backimgsrc./images/2.jpegalt/divdivclassface leftimgsrc./images/3.jpegalt/divdivclassface rightimgsrc./images/4.jpegalt/divdivclassface topimgsrc./images/5.jpegalt/divdivclassface bottomimgsrc./images/6.jpegalt/div/div/div/body/html6. 玩转自定义这个相册就像一个基础模板你可以随意修改换图片把src改成你自己的图片注意尺寸比例如果图片变形可以调整img的object-fit属性。改大小魔方是400x400如果你想做大一点可以同时修改.container、.face的宽高以及translateZ的值保持为边长的一半。改旋转方向在keyframes rotate里可以只让绕 Y 轴转比如transform: rotateY(360deg);或者改成相反方向。加速/减速修改动画时间比如animation: rotate 5s linear infinite;会转得更快。去掉背景图直接删掉background-image换成纯色或渐变色。增加交互如果你会一点 JavaScript可以给魔方加上鼠标拖动旋转的效果那样就更像真实的魔方了。7. 结语看只用几行 CSS 就能做出这么炫酷的 3D 效果是不是很有成就感其实 3D 变换的原理并不复杂关键是理解坐标系和变换顺序。你可以试着修改每个面的旋转角度甚至做一个多层的复杂结构比如把每个面再拆成 3x3 的小格子做成真正的“魔方”。如果你做出了自己的版本欢迎在评论区分享链接我们一起交流。下期再见PS如果你喜欢这种“小白也能看懂”系列别忘了点赞收藏我会继续分享更多简单有趣的前端小项目。如果这篇这篇文章对您有帮助关注、点赞、收藏三连支持一下。有疑问或想法评论区见。我们下期再见。
