3d正方体旋转相册代码_仿抖音3d立体图片音乐盒用vue、css、js的html制作及代码分析

1 说明：

1.1 拿来即能用，老少男女皆可为，适合为自己或者女朋友或老婆、男朋友或老公，小孩，老人制作有音乐的3d图片展示。

1.2 推荐指数：★★★★

1.3 适合收藏，代码已经亲测过，建议谷歌浏览器，其他浏览器没测试，+微软vscode编辑器。

2 效果

3 准备工作：

3.1 图片准备：6张jpg图片：命名为：jt1~6，即jt1.jpg，jt2.jpg，jt3.jpg......，放在文件夹img中。

3.2 背景音乐准备：选一个喜欢的背景音乐：简单一点就是命名为：tiantian.mp3(和我一样，这样图片和音乐都不需要去修改代码)。

3.3 vue.js文件需要去官网下载，也可以直接引用，建议下载比较好，因为断网也能使用。

3.3.1 直接引用如下：

3.3.2 下载vue.js，以前说过怎么办？复习一下。

复制上面的网页地址，你懂的，到浏览器中打开，按ctrl+a全选，复制到本地，新建一个txt，黏贴上去，保存，再重新命名为：vue.js,即可。

4.如上图，图片、背景音乐、vue.js准备好了。

========================

接下来是代码部分：一个一个来

========================

5.index.html代码：

vue.js立方体旋转播放特效

{{infoShow?'关闭':'打开'}}

6 vueapp.js文件代码：

var app = new Vue({el: "#app",data() {return {list: [{ index: 1, imgUrl: 'img/jt1.jpg', imgShow: false },{ index: 2, imgUrl: 'img/jt2.jpg', imgShow: false },{ index: 3, imgUrl: 'img/jt3.jpg', imgShow: false },{ index: 4, imgUrl: 'img/jt4.jpg', imgShow: false },{ index: 5, imgUrl: 'img/jt5.jpg', imgShow: false },{ index: 6, imgUrl: 'img/jt6.jpg', imgShow: false }],openShow: false,mirrorNum: 0,imgTimer: null,rotateY: 0,imgIndex: -1,listTimer: null,boxTimer: null,infoShow: false,miaoTimer: null,catSpeed: 0,catTimer: null,closeSpeed: -1,closeTimer: null}},mounted: function() {},methods: {imgMove() {var oBox = document.getElementById('box');var oMinBox = document.getElementById('minBox');this.boxTimer = setInterval(() => {this.rotateY += 3;oBox.style.transform = 'perspective(800px) translateZ(-20px)  rotateX(-20deg) rotateY(' + this.rotateY + 'deg)';oMinBox.style.transform = 'perspective(800px) rotateX(-15deg) translateZ(-100px) rotateY(' + (-this.rotateY) + 'deg)';}, 200)},cirClick() {this.infoShow = !this.infoShowvar oBox = document.getElementById('box');var aPupil = document.getElementsByClassName('pupil')var oCat = document.getElementById('cat');var aLi = oBox.getElementsByTagName('li');if(this.infoShow) {clearInterval(this.imgTimer);this.imgTimer = setInterval(() => {this.imgIndex++;this.list[this.imgIndex].imgShow = true;if(this.imgIndex >= 5) {clearInterval(this.imgTimer);this.imgIndex = 0}}, 300);this.imgMove();for(var i = 0; i < aPupil.length; i++) {aPupil[i].style.top = '7px',aPupil[i].style.left = '30px'}this.$refs.vd.play()this.catTimer = setInterval(() => {var catNum = parseInt(this.$refs.vd.duration) / 2if(parseInt(this.$refs.vd.currentTime) >= catNum) {this.catSpeed -= 10;} else {this.catSpeed += 10;}if(parseInt(this.$refs.vd.currentTime) >= parseInt(this.$refs.vd.duration)) {clearInterval(this.catTimer);this.infoShow = false;clearInterval(this.boxTimer);for(var i in this.list) {this.list[i].imgShow = false;}}oCat.style.transform = 'perspective(800px) scale(0.3) translateZ(' + (-20 - this.catSpeed) + 'px)';}, 300)} else {clearInterval(this.boxTimer);clearInterval(this.imgTimer);clearInterval(this.catTimer);for(var i = 0; i < aPupil.length; i++) {aPupil[i].style.top = '28px',aPupil[i].style.left = '0px'}this.$refs.vd.pause();for(var i in this.list) {this.list[i].imgShow = false;}}}}})

7 3dbox.css文件的代码：

* {margin: 0px;padding: 0px;}/*3d正方体的图片大小画布设置*/.main {width: 400px;height: 400px;margin: 0px auto;position: relative;}/*音乐盒=3d正方体大小设置*/.box {transform-style: preserve-3d;position: absolute;width: 240px;height: 240px;left: 50%;margin-left: -120px;top: 50%;margin-top: -120px;transform: perspective(800px) rotateX(-20deg) rotateY(-20deg) translateZ(-20px);z-index: 5;animation: imgMove 5s linear;}/*图片动画设置*/@keyframes imgMove {0%{transform: rotateX(-20deg)rotateY(-20deg);}30%{transform: rotateX(-80deg)rotateY(-80deg);}60% {transform: rotateX(-160deg)rotateY(-160deg);}90% {transform: rotateX(-240deg)rotateY(-240deg);}120%{transform: rotateX(-320deg)rotateY(-320deg);}150%{transform: rotateX(-240deg)rotateY(-240deg);}180% {transform: rotateX(-180deg)rotateY(-180deg);}210% {transform: rotateX(-120deg)rotateY(-120deg);}240% {transform: rotateX(-80deg)rotateY(-80deg);}300% {transform: rotateX(-60deg)rotateY(-60deg);}360% {transform: rotateX(-20deg)rotateY(20deg);}}.box li {list-style: none;width: 240px;height: 240px;position: absolute;opacity: 0.8;}.box li img {width: 240px;height: 240px;vertical-align: middle;}.box li:nth-child(1) {transform: translateZ(120px);-webkit-transform: translateZ(120px);}.box li:nth-child(2) {transform: rotateX(90deg) translateZ(120px);-webkit-transform: rotateX(90deg) translateZ(120px);}.box li:nth-child(3) {transform: translateZ(-120px);-webkit-transform: translateZ(-120px);}.box li:nth-child(4) {transform: rotateX(90deg) translateZ(-120px);-webkit-transform: rotateX(90deg) translateZ(-120px);}.box li:nth-child(5) {transform: rotateY(90deg) translateZ(120px);-webkit-transform: rotateY(90deg) translateZ(120px);}.box li:nth-child(6) {transform: rotateY(90deg)translateZ(-120px);-webkit-transform: rotateY(90deg)translateZ(-120px);}.box .imgOpen {opacity: 0.6;}.box .imgOpen:nth-child(1) {transform: translateZ(180px);-webkit-transform: translateZ(180px);}.box .imgOpen:nth-child(2) {transform: rotateX(90deg) translateZ(180px);-webkit-transform: rotateX(90deg) translateZ(180px);}.box .imgOpen:nth-child(3) {transform: translateZ(-180px);-webkit-transform: translateZ(-180px);}.box .imgOpen:nth-child(4) {transform: rotateX(90deg) translateZ(-180px);-webkit-transform: rotateX(90deg) translateZ(-180px);}.box .imgOpen:nth-child(5) {transform: rotateY(90deg) translateZ(180px);-webkit-transform: rotateY(90deg) translateZ(180px);}.box .imgOpen:nth-child(6) {transform: rotateY(90deg) translateZ(-180px);-webkit-transform: rotateY(90deg) translateZ(-180px);}.minBox {transform-style: preserve-3d;position: absolute;width: 120px;height: 120px;left: 50%;margin-left: -60px;top: 50%;margin-top: -30px;transform: perspective(800px) rotateX(-15deg) rotateY(0deg) rotateZ(45deg) translateZ(-100px);}.minBox dd {width: 120px;height: 120px;position: absolute;z-index: 4;}.minBox dd img {width: 120px;height: 120px;vertical-align: middle;}.minBox dd:nth-child(1) {transform: translateZ(60px);-webkit-transform: translateZ(60px);}.minBox dd:nth-child(2) {transform: rotateX(90deg) translateZ(60px);-webkit-transform: rotateX(90deg) translateZ(60px);}.minBox dd:nth-child(3) {transform: translateZ(-60px);-webkit-transform: translateZ(-60px);}.minBox dd:nth-child(4) {transform: rotateX(90deg) translateZ(-60px);-webkit-transform: rotateX(90deg) translateZ(-60px);}.minBox dd:nth-child(5) {transform: rotateY(90deg) translateZ(60px);-webkit-transform: rotateY(90deg) translateZ(60px);}.minBox dd:nth-child(6) {transform: rotateY(90deg)translateZ(-60px);-webkit-transform: rotateY(90deg)translateZ(-60px);}.box .imgOpen:nth-child(1) {transform: translateZ(180px);-webkit-transform: translateZ(180px);}.box .imgOpen:nth-child(2) {transform: rotateX(90deg) translateZ(180px);-webkit-transform: rotateX(90deg) translateZ(180px);}.box .imgOpen:nth-child(3) {transform: translateZ(-180px);-webkit-transform: translateZ(-180px);}.box .imgOpen:nth-child(4) {transform: rotateX(90deg) translateZ(-180px);-webkit-transform: rotateX(90deg) translateZ(-180px);}.box .imgOpen:nth-child(5) {transform: rotateY(90deg) translateZ(180px);-webkit-transform: rotateY(90deg) translateZ(180px);}.box .imgOpen:nth-child(6) {transform: rotateY(90deg) translateZ(-180px);-webkit-transform: rotateY(90deg) translateZ(-180px);}/*音乐和图片展示的开关设置*/.play {animation-play-state: running !important;}.pause {animation-play-state: paused !important;}.content-info {/*开关的文字宽度设置*/width: 300px;text-align: center;/*字体大小设置*/font-size: 100px;position: absolute;left:300px;transform-style: preserve-3d;transform: perspective(800px) scale(0.3) translateZ(-20px);}

8 gunball.css文件的代码：

BODY {  /*body的设置是全局的，也会影响到正方体音乐图片的展示*/  -webkit-perspective: 40em;          perspective: 40em;  -webkit-perspective-origin: center center;          perspective-origin: center center;  overflow: hidden;  /*注意这个字体大小，不仅仅设置gunball的大小，也影响音乐盒的图片展示*/  font-size: 14px;  background: #000;  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.025) 50%, transparent 50%);  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.025) 50%, transparent 50%);  background-size: 1em 10%;}.container {  width: 15em;  height: 15em;  -webkit-transform-style: preserve-3d;          transform-style: preserve-3d;  -webkit-animation: rotate 12s infinite linear;          animation: rotate 12s infinite linear;}.cube {  /*保持gunball大小不变形*/  position: absolute;  width: 1.5em;  height: 1.5em;  -webkit-transform-style: preserve-3d;          transform-style: preserve-3d;}.cube--2 {  -webkit-transform: rotateX(45deg) rotateY(45deg);          transform: rotateX(45deg) rotateY(45deg);}.cube--3 {  -webkit-transform: rotateX(45deg) rotateZ(45deg);          transform: rotateX(45deg) rotateZ(45deg);}.side {  position: absolute;  width: 1.5em;  height: 1.5em;  border: 2px dotted rgba(255, 213, 0, 0.35);  border-radius: 50%;  -webkit-transform-style: preserve-3d;          transform-style: preserve-3d;  -webkit-transform: rotateY(180deg);          transform: rotateY(180deg);}.side::before, .side::after {  content: "";  display: block;  position: absolute;  left: 0;  right: 0;  bottom: 0;  top: 0;  margin: auto;  box-sizing: border-box;  border-radius: inherit;  border: 1px solid;  box-shadow: inset 0 0 1em, 0 0 1em;}.side::before {  width: 0.5em;  height: 0.5em;  color: gold;}.side::after {  width: 0.5em;  height: 0.5em;  -webkit-transform: translateZ(-1em);          transform: translateZ(-1em);  box-shadow: inset 0 0 1em, 0 0 1em;  color: teal;}.side--back {  -webkit-transform: translateZ(-2em) rotateY(180deg);          transform: translateZ(-2em) rotateY(180deg);}.side--left {  -webkit-transform: translateX(-2em) rotateY(-90deg);          transform: translateX(-2em) rotateY(-90deg);}.side--right {  -webkit-transform: translateX(2em) rotateY(90deg);          transform: translateX(2em) rotateY(90deg);}.side--top {  -webkit-transform: translateY(-2em) rotateX(90deg);          transform: translateY(-2em) rotateX(90deg);}.side--bottom {  -webkit-transform: translateY(2em) rotateX(-90deg);          transform: translateY(2em) rotateX(-90deg);}.side--front {  -webkit-transform: translateZ(2em);          transform: translateZ(2em);}.side__inner {  position: absolute;  left: 0;  right: 0;  bottom: 0;  top: 0;  width: 0.5em;  height: 0.5em;  margin: auto;  border-radius: inherit;  border: 1px solid;  box-shadow: inset 0 0 1em;  color: orangered;  -webkit-transform: translateZ(1em);          transform: translateZ(1em);  -webkit-transform-style: preserve-3d;          transform-style: preserve-3d;}.side__inner::before, .side__inner::after {  content: "";  display: block;  position: absolute;  left: 0;  right: 0;  bottom: 0;  top: 0;  margin: auto;  box-sizing: border-box;  border-radius: inherit;  border: 1px solid;  box-shadow: inset 0 0 1em, 0 0 1em;}.side__inner::before {  width: 0.5em;  height: 0.5em;  -webkit-transform: translateZ(1em);          transform: translateZ(1em);  color: crimson;}.side__inner::after {  width: 0.5em;  height: 0.5em;  -webkit-transform: translateZ(1em);          transform: translateZ(1em);  color: purple;}@-webkit-keyframes rotate {  100% {    -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);            transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);  }}@keyframes rotate {  100% {    -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);            transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);  }}BODY {  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-box-pack: center;      -ms-flex-pack: center;          justify-content: center;  -webkit-box-align: center;      -ms-flex-align: center;          align-items: center;}

9 注意几个问题：

9.1 vueapp.js为什么只能放在后面引用，前面引用行不行？感兴趣的可以去试试。

9.2 vue.js布局和纯html布局的不同，可以思考思考。

9.3 不想思考也没事，拿来就可以使用。注意背景音乐的命名：tiantian.mp3，6张图片命名：jt1.jpg，复制vue.js即可。简单使用，小白就会。

分享出来。