3D旋转相册代码及详细使用教程

相信很多小伙伴看着短视频里的3D旋转相册很想要吧，下面就让我们来看看它的代码及使用方法！

效果展示

代码展示 1.html

DOCTYPE html>3D立体动态相册

2.css

/*默认样式*/*{margin: 0;padding: 0;}ol,ul{list-style: none;}/*外层盒子*/#cube{height: 200px;width: 200px;/* 将整个盒子至于中间 */position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;/* 这是旋转基点 */transform-origin: -550px 550px 100;/* 设置景深 */perspective:800px; }#cube ul{width: 200px;height: 200px;transform-style: preserve-3d;animation: rotate1 5s linear infinite;}#cube ul img{width: 200px;height: 200px;}#cube ul li{width: 200px;height: 200px;position: absolute;/* 设置过渡时间 */transition: 2s;}#cube ul li:nth-child(1){left: 0;top: 0;opacity: .4;transform: translateZ(100px);}#cube ul li:nth-child(2){left: 100px;top: 0;transform: rotateY(90deg);opacity: .4;}#cube ul li:nth-child(3){left: -100px;top: 0;transform: rotateY(-90deg);opacity: .4;}#cube ul li:nth-child(4){left: 0;top: 100px;transform: rotateX(-90deg);opacity:.4;}#cube ul li:nth-child(5){left: 0;top: -100px;transform: rotateX(90deg);opacity: .4;}#cube ul li:nth-child(6){left: 0;top: 0;transform: translateZ(-100px) rotateY(180deg);opacity: .4;} /* 内层盒子*/#cube ol{width: 100px;height: 100px;position: absolute;left: 50px;top: 50px;/* 给内层盒子设置3d空间 */transform-style: preserve-3d;/* 设置动画 */animation: rotate1 5s linear infinite;}#cube ol img{width: 100px;height: 100px;}#cube ol li{width: 100px;height: 100px;position: absolute;}#cube ol li:nth-child(1){left: 0;top: 0;opacity: .7;transform: translateZ(50px);}#cube ol li:nth-child(2){left: 100px;top: 0px;transform-origin: left;transform:translateZ(50px) rotateY(90deg);opacity: .7;}#cube ol li:nth-child(3){left: -100px;top: 0px;transform-origin: right;transform:translateZ(50px) rotateY(-90deg);opacity: .7;}#cube ol li:nth-child(4){left:0px;top: 100px;transform-origin: top;transform:translateZ(50px) rotateX(-90deg);opacity: .7;}#cube ol li:nth-child(5){left:0px;top: -100px;transform-origin: bottom;transform:translateZ(50px) rotateX(90deg);opacity: .7;}#cube ol li:nth-child(6){left:0px;top: 0px;transform: translateZ(-50px) rotateY(180deg);opacity: .7;}/*外层盒子鼠标移入效果*/#cube:hover ul li:nth-child(1){transform: translateZ(200px) scale(1.5);opacity: .6;}#cube:hover ul li:nth-child(2){transform:rotateY(90deg) translateZ(100px) scale(1.5);opacity: .6;}#cube:hover ul li:nth-child(3){transform:rotateY(-90deg) translateZ(100px) scale(1.5);opacity: .6;}#cube:hover ul li:nth-child(4){transform:rotateX(-90deg) translateZ(100px) scale(1.5);opacity: .6;}#cube:hover ul li:nth-child(5){transform:rotateX(90deg) translateZ(100px) scale(1.5);opacity: .6;}#cube:hover ul li:nth-child(6){transform:rotateY(180deg) translateZ(200px) scale(1.5);opacity: .6;}/*旋转动画效果*/@keyframes rotate1{0%{transform: rotateY(0);}100%{transform: rotateY(360deg);}} 使用方法 1.在桌面（或磁盘内）新建一个文件夹。 2.在3D相册文件夹内再新建两个文件夹和一个文