前言：
此刻看官们对“css中3d制作盒子模型”大体比较重视，大家都需要分析一些“css中3d制作盒子模型”的相关内容。那么小编同时在网络上网罗了一些关于“css中3d制作盒子模型””的相关知识，希望小伙伴们能喜欢，你们快快来学习一下吧！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 直接引用如下：
<script src=";></script>
3.3.2 下载vue.js，以前说过怎么办？复习一下。
复制上面的网页地址，你懂的，到浏览器中打开，按ctrl+a全选，复制到本地，新建一个txt，黏贴上去，保存，再重新命名为：vue.js,即可。
4.如上图，图片、背景音乐、vue.js准备好了。
========================
接下来是代码部分：一个一个来
========================
5.index.html代码：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>vue.js立方体旋转播放特效</title><!--注意引入js和css文件，但是后面还有一个vueapp.js文件放在后面引用--><script src="./vue.js"></script><link rel="stylesheet" href="./3dbox.css"><link rel="stylesheet" href="./gunball.css"></head><body> <!--gunball设置--> <div class="container"> <div class="cube cube--1"> <div class="side side--back"> <div class="side__inner"></div> </div> <div class="side side--left"> <div class="side__inner"></div> </div> <div class="side side--right"> <div class="side__inner"></div> </div> <div class="side side--top"> <div class="side__inner"></div> </div> <div class="side side--bottom"> <div class="side__inner"></div> </div> <div class="side side--front"> <div class="side__inner"></div> </div> </div> <div class="cube cube--2"> <div class="side side--back"> <div class="side__inner"></div> </div> <div class="side side--left"> <div class="side__inner"></div> </div> <div class="side side--right"> <div class="side__inner"></div> </div> <div class="side side--top"> <div class="side__inner"></div> </div> <div class="side side--bottom"> <div class="side__inner"></div> </div> <div class="side side--front"> <div class="side__inner"></div> </div> </div> <div class="cube cube--3"> <div class="side side--back"> <div class="side__inner"></div> </div> <div class="side side--left"> <div class="side__inner"></div> </div> <div class="side side--right"> <div class="side__inner"></div> </div> <div class="side side--top"> <div class="side__inner"></div> </div> <div class="side side--bottom"> <div class="side__inner"></div> </div> <div class="side side--front"> <div class="side__inner"></div> </div> </div> </div> <!--音乐盒div--> <div id="app"> <div class="main"> <ul class="box" id="box" :class="infoShow?'play':'pause'"> <li v-for="(item,index) in list" :key="item.index" :class="{imgOpen:item.imgShow}"> <img :src="item.imgUrl" /> </li> </ul> <dl class="minBox" id="minBox"> <dd v-for="(item,index) in list" :key="item.index"> <img :src="item.imgUrl" /> </dd> </dl> </div> <audio src="./tiantian.mp3" ref="vd"></audio> <!--音乐和图片展示动画开关--> <div class="content-info" @click="cirClick"> <span :style="{color:infoShow?'#36c9a3':'#fa004b'}">{{infoShow?'关闭':'打开'}}</span> </div> </div></body><!--音乐盒的vue设置，必须放在音乐盒div后面这里引用--><script src="./vueapp.js"></script></html>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.infoShow var 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) / 2 if(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即可。简单使用，小白就会。
分享出来。
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #css中3d制作盒子模型 #cdncssjs
