仿抖音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 直接引用如下：

<code>/<code>

3.3.2 下載vue.js，以前說過怎麼辦？複習一下。

複製上面的網頁地址，你懂的，到瀏覽器中打開，按ctrl+a全選，複製到本地，新建一個txt，黏貼上去，保存，再重新命名為：vue.js,即可。

4.如上圖，圖片、背景音樂、vue.js準備好了。

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

接下來是代碼部分：一個一個來

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

5.index.html代碼：

<code>




<title>vue.js立方體旋轉播放特效/<title>


<link>
<link>


    
\t

\t\t

\t\t\t

\t\t\t\t

\t\t\t

\t\t\t

\t\t\t\t

\t\t\t

\t\t\t 

\t\t\t\t

\t\t\t

\t\t\t

\t\t\t\t

\t\t\t

\t\t\t

\t\t\t\t

\t\t\t

\t\t\t

\t\t\t\t

\t\t\t

\t\t

\t\t
\t\t

\t\t\t

\t\t\t\t

\t\t\t

\t\t\t

\t\t\t\t

\t\t\t

\t\t\t

\t\t\t\t

\t\t\t

\t\t\t

\t\t\t\t
 

\t\t\t

\t\t\t

\t\t\t\t

\t\t\t

\t\t\t

\t\t\t\t

\t\t\t

\t\t

\t\t
\t\t

\t\t\t

\t\t\t\t

\t\t\t

\t\t\t

\t\t\t\t

\t\t\t

\t\t\t

\t\t\t\t

\t\t\t

\t\t\t

\t\t\t\t

\t\t\t

\t\t\t

\t\t\t\t

\t\t\t

\t\t\t 

\t\t\t\t

\t\t\t

\t\t

\t


\t
\t

\t\t

\t\t\t

\t\t\t\t

\t\t\t\t\t
\t\t\t\t

\t\t\t

\t\t\t

\t\t\t\t

\t\t\t\t\t
\t\t\t\t

\t\t\t

\t\t

\t\t<audio>
        
\t\t

\t\t\t{{infoShow?'關閉':'打開'}}
\t\t

\t

 




/<code>

6 vueapp.js文件代碼：

<code>var app = new Vue({
\t\tel: "#app",
\t\tdata() {
\t\t\treturn {
\t\t\t\tlist: [
\t\t\t\t\t{ index: 1, imgUrl: 'img/jt1.jpg', imgShow: false },
\t\t\t\t\t{ index: 2, imgUrl: 'img/jt2.jpg', imgShow: false },
\t\t\t\t\t{ index: 3, imgUrl: 'img/jt3.jpg', imgShow: false },
\t\t\t\t\t{ index: 4, imgUrl: 'img/jt4.jpg', imgShow: false },
\t\t\t\t\t{ index: 5, imgUrl: 'img/jt5.jpg', imgShow: false },
\t\t\t\t\t{ index: 6, imgUrl: 'img/jt6.jpg', imgShow: false }
\t\t\t\t],
\t\t\t\topenShow: false,
\t\t\t\tmirrorNum: 0,
\t\t\t\timgTimer: null,
\t\t\t\trotateY: 0,
\t\t\t\timgIndex: -1,
\t\t\t\tlistTimer: null,
\t\t\t\tboxTimer: null,
\t\t\t\tinfoShow: false,
\t\t\t\tmiaoTimer: null,
\t\t\t\tcatSpeed: 0,
\t\t\t\tcatTimer: null,
\t\t\t\tcloseSpeed: -1,
\t\t\t\tcloseTimer: null
\t\t\t}
\t\t},
\t\tmounted: function() {},
\t\tmethods: {
\t\t\timgMove() {
\t\t\t\tvar oBox = document.getElementById('box');
\t\t\t\tvar oMinBox = document.getElementById('minBox');
\t\t\t\tthis.boxTimer = setInterval(() => {
\t\t\t\t\tthis.rotateY += 3;
\t\t\t\t\toBox.style.transform = 'perspective(800px) translateZ(-20px)  rotateX(-20deg) rotateY(' + this.rotateY + 'deg)';
\t\t\t\t\toMinBox.style.transform = 'perspective(800px) rotateX(-15deg) translateZ(-100px) rotateY(' + (-this.rotateY) + 'deg)';
\t\t\t\t}, 200)
\t\t\t},
\t\t\tcirClick() {
\t\t\t\tthis.infoShow = !this.infoShow 

\t\t\t\tvar oBox = document.getElementById('box');
\t\t\t\tvar aPupil = document.getElementsByClassName('pupil')
\t\t\t\tvar oCat = document.getElementById('cat');
\t\t\t\tvar aLi = oBox.getElementsByTagName('li');
\t\t\t\tif(this.infoShow) {
\t\t\t\t\tclearInterval(this.imgTimer);
\t\t\t\t\tthis.imgTimer = setInterval(() => {
\t\t\t\t\t\tthis.imgIndex++;
\t\t\t\t\t\tthis.list[this.imgIndex].imgShow = true;
\t\t\t\t\t\tif(this.imgIndex >= 5) {
\t\t\t\t\t\t\tclearInterval(this.imgTimer);
\t\t\t\t\t\t\tthis.imgIndex = 0
\t\t\t\t\t\t}
\t\t\t\t\t}, 300);
\t\t\t\t\tthis.imgMove();
\t\t\t\t\tfor(var i = 0; i < aPupil.length; i++) {
\t\t\t\t\t\taPupil[i].style.top = '7px',
\t\t\t\t\t\t\taPupil[i].style.left = '30px'
\t\t\t\t\t}
\t\t\t\t\tthis.$refs.vd.play()
\t\t\t\t\tthis.catTimer = setInterval(() => {
\t\t\t\t\t\tvar catNum = parseInt(this.$refs.vd.duration) / 2
\t\t\t\t\t\tif(parseInt(this.$refs.vd.currentTime) >= catNum) {
\t\t\t\t\t\t\tthis.catSpeed -= 10;
\t\t\t\t\t\t} else {
\t\t\t\t\t\t\tthis.catSpeed += 10;
\t\t\t\t\t\t}
\t\t\t\t\t\tif(parseInt(this.$refs.vd.currentTime) >= parseInt(this.$refs.vd.duration)) {
\t\t\t\t\t\t\tclearInterval(this.catTimer);
\t\t\t\t\t\t\tthis.infoShow = false;
\t\t\t\t\t\t\tclearInterval(this.boxTimer);
\t\t\t\t\t\t\tfor(var i in this.list) {
\t\t\t\t\t\t\t\tthis.list[i].imgShow = false;
\t\t\t\t\t\t\t}
\t\t\t\t\t\t}
\t\t\t\t\t\toCat.style.transform = 'perspective(800px) scale(0.3) translateZ(' + (-20 - this.catSpeed) + 'px)';
\t\t\t\t\t}, 300)
\t\t\t\t} else {
\t\t\t\t\tclearInterval(this.boxTimer);
\t\t\t\t\tclearInterval(this.imgTimer);
\t\t\t\t\tclearInterval(this.catTimer);
\t\t\t\t\tfor(var i = 0; i < aPupil.length; i++) {
\t\t\t\t\t\taPupil[i].style.top = '28px',
\t\t\t\t\t\t\taPupil[i].style.left = '0px'
\t\t\t\t\t}
\t\t\t\t\tthis.$refs.vd.pause();
\t\t\t\t\tfor(var i in this.list) {
\t\t\t\t\t\tthis.list[i].imgShow = false;
\t\t\t\t\t}
\t\t\t\t} 

\t\t\t}
\t\t}
\t})/<code>

7 3dbox.css文件的代碼：

<code>* {
\tmargin: 0px;
\tpadding: 0px;
}

/*3d正方體的圖片大小畫布設置*/
.main {
\twidth: 400px;
\theight: 400px;
\tmargin: 0px auto;
\tposition: relative;
}
/*音樂盒=3d正方體大小設置*/
.box {
\ttransform-style: preserve-3d;
\tposition: absolute;
\twidth: 240px;
\theight: 240px;
\tleft: 50%;
\tmargin-left: -120px;
\ttop: 50%;
\tmargin-top: -120px;
\ttransform: perspective(800px) rotateX(-20deg) rotateY(-20deg) translateZ(-20px);
\tz-index: 5;
\tanimation: imgMove 5s linear;
}
/*圖片動畫設置*/
@keyframes imgMove {
\t0%{
\t\ttransform: rotateX(-20deg)rotateY(-20deg);
\t}
\t30%{
\t\ttransform: rotateX(-80deg)rotateY(-80deg);
\t}
\t60% {
\t\ttransform: rotateX(-160deg)rotateY(-160deg);
\t}
\t90% {
\t\ttransform: rotateX(-240deg)rotateY(-240deg);
\t}
\t120%{ 

\t\ttransform: rotateX(-320deg)rotateY(-320deg);
\t}
\t150%{
\t\ttransform: rotateX(-240deg)rotateY(-240deg);
\t}
\t180% {
\t\ttransform: rotateX(-180deg)rotateY(-180deg);
\t}
\t210% {
\t\ttransform: rotateX(-120deg)rotateY(-120deg);
\t}
\t240% {
\t\ttransform: rotateX(-80deg)rotateY(-80deg);
\t}
\t300% {
\t\ttransform: rotateX(-60deg)rotateY(-60deg);
\t}
\t360% {
\t\ttransform: rotateX(-20deg)rotateY(20deg);
\t}
}

.box li {
\tlist-style: none;
\twidth: 240px;
\theight: 240px;
\tposition: absolute;
\topacity: 0.8;
}
.box li img {
\twidth: 240px;
\theight: 240px;
\tvertical-align: middle;
}
.box li:nth-child(1) {
\ttransform: translateZ(120px);
\t-webkit-transform: translateZ(120px);
}
.box li:nth-child(2) {
\ttransform: rotateX(90deg) translateZ(120px);
\t-webkit-transform: rotateX(90deg) translateZ(120px);
}
.box li:nth-child(3) {
\ttransform: translateZ(-120px);
\t-webkit-transform: translateZ(-120px);
}
.box li:nth-child(4) {
\ttransform: rotateX(90deg) translateZ(-120px);
\t-webkit-transform: rotateX(90deg) translateZ(-120px);
} 

.box li:nth-child(5) {
\ttransform: rotateY(90deg) translateZ(120px);
\t-webkit-transform: rotateY(90deg) translateZ(120px);
}
.box li:nth-child(6) {
\ttransform: rotateY(90deg)translateZ(-120px);
\t-webkit-transform: rotateY(90deg)translateZ(-120px);
}
.box .imgOpen {
\topacity: 0.6;
}
.box .imgOpen:nth-child(1) {
\ttransform: translateZ(180px);
\t-webkit-transform: translateZ(180px);
}
.box .imgOpen:nth-child(2) {
\ttransform: rotateX(90deg) translateZ(180px);
\t-webkit-transform: rotateX(90deg) translateZ(180px);
}
.box .imgOpen:nth-child(3) {
\ttransform: translateZ(-180px);
\t-webkit-transform: translateZ(-180px);
}
.box .imgOpen:nth-child(4) {
\ttransform: rotateX(90deg) translateZ(-180px);
\t-webkit-transform: rotateX(90deg) translateZ(-180px);
}
.box .imgOpen:nth-child(5) {
\ttransform: rotateY(90deg) translateZ(180px);
\t-webkit-transform: rotateY(90deg) translateZ(180px);
}
.box .imgOpen:nth-child(6) {
\ttransform: rotateY(90deg) translateZ(-180px);
\t-webkit-transform: rotateY(90deg) translateZ(-180px);
}
.minBox {
\ttransform-style: preserve-3d;
\tposition: absolute;
\twidth: 120px;
\theight: 120px;
\tleft: 50%;
\tmargin-left: -60px;
\ttop: 50%;
\tmargin-top: -30px;
\ttransform: perspective(800px) rotateX(-15deg) rotateY(0deg) rotateZ(45deg) translateZ(-100px);
}
.minBox dd {
\twidth: 120px;
\theight: 120px;
\tposition: absolute; 

\tz-index: 4;
}
.minBox dd img {
\twidth: 120px;
\theight: 120px;
\tvertical-align: middle;
}
.minBox dd:nth-child(1) {
\ttransform: translateZ(60px);
\t-webkit-transform: translateZ(60px);
}
.minBox dd:nth-child(2) {
\ttransform: rotateX(90deg) translateZ(60px);
\t-webkit-transform: rotateX(90deg) translateZ(60px);
}
.minBox dd:nth-child(3) {
\ttransform: translateZ(-60px);
\t-webkit-transform: translateZ(-60px);
}
.minBox dd:nth-child(4) {
\ttransform: rotateX(90deg) translateZ(-60px);
\t-webkit-transform: rotateX(90deg) translateZ(-60px);
}
.minBox dd:nth-child(5) {
\ttransform: rotateY(90deg) translateZ(60px);
\t-webkit-transform: rotateY(90deg) translateZ(60px);
}
.minBox dd:nth-child(6) {
\ttransform: rotateY(90deg)translateZ(-60px);
\t-webkit-transform: rotateY(90deg)translateZ(-60px);
}
.box .imgOpen:nth-child(1) {
\ttransform: translateZ(180px);
\t-webkit-transform: translateZ(180px);
}
.box .imgOpen:nth-child(2) {
\ttransform: rotateX(90deg) translateZ(180px);
\t-webkit-transform: rotateX(90deg) translateZ(180px);
}
.box .imgOpen:nth-child(3) {
\ttransform: translateZ(-180px);
\t-webkit-transform: translateZ(-180px);
}
.box .imgOpen:nth-child(4) {
\ttransform: rotateX(90deg) translateZ(-180px);
\t-webkit-transform: rotateX(90deg) translateZ(-180px);
}
.box .imgOpen:nth-child(5) {
\ttransform: rotateY(90deg) translateZ(180px);
\t-webkit-transform: rotateY(90deg) translateZ(180px); 

}
.box .imgOpen:nth-child(6) {
\ttransform: rotateY(90deg) translateZ(-180px);
\t-webkit-transform: rotateY(90deg) translateZ(-180px);
}

/*音樂和圖片展示的開關設置*/
.play {
\tanimation-play-state: running !important;
}
.pause {
\tanimation-play-state: paused !important;
}

.content-info {
\t/*開關的文字寬度設置*/
\twidth: 300px;
\ttext-align: center;
\t/*字體大小設置*/
\tfont-size: 100px;
\tposition: absolute;
\tleft:300px;
\ttransform-style: preserve-3d;
\ttransform: perspective(800px) scale(0.3) translateZ(-20px);
}
/<code>

8 gunball.css文件的代碼：

<code>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;
}/<code>

9 注意幾個問題：

9.1 vueapp.js為什麼只能放在後面引用，前面引用行不行？感興趣的可以去試試。

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

9.3 不想思考也沒事，拿來就可以使用。注意背景音樂的命名：tiantian.mp3，6張圖片命名：jt1.jpg，複製vue.js即可。簡單使用，小白就會。

分享出來。

閱讀更多 易三一世 的文章

關鍵字: CSS 微軟 Chrome