前端实现3D魔方旋转特效
发布时间：2025-12-09 17:22:22
浏览次数：5
代码自用自取，复制粘贴直接使用，喜欢的话可以查看博主其它文章，贡献一丢丢的浏览量，感激不尽。
先看一下效果
<!DOCTYPE html><html><head><title>魔方</title><meta charset="utf-8"><style type="text/css">*{margin: 0;padding: 0;}body{width: 100%;height: 100%;background: radial-gradient(#fff, black); }.container{width:300px;height:300px;margin:200px auto;perspective:20000px;}.box{width:300px;height:300px;border:1px solid transparent;box-sizing: border-box;position:relative;transform-style:preserve-3d;/*transform:rotateX(30deg) rotateY(30deg);*/animation: rotate 7s linear infinite;}@keyframes rotate{100%{transform:rotatex(360deg) rotatey(360deg) rotatez(360deg);}}.box-page{width: 300px;height: 300px;position:absolute;box-sizing: border-box;transform-style:preserve-3d;}.top{transform: translateZ(150px);}.bottom{transform: translateZ(-150px) rotateX(180deg);}.right{transform: translateX(150px) rotateY(90deg);}.left{transform: translateX(-150px) rotateY(-90deg);}.after{transform: translateY(-150px) rotateX(90deg);}.before{transform: translateY(150px) rotateX(-90deg);}.box-page p:first-child,.box-page p:nth-child(3),.box-page p:nth-child(5),.box-page p:nth-child(7),.box-page p:nth-child(9){transform: rotateY(0deg);animation: rotatey 7s linear infinite;}@keyframes rotatey{20%{transform: rotateY(0deg);background-size: 300px 300px;}40%{/*background-image: url("img/img.jpg");*/transform: rotateY(540deg);background-size: 100px 100px;}60%{/*background-image: url("img/img.jpg");*/transform: rotateY(540deg);background-size: 100px 100px;}80%{transform: rotateY(0deg);background-size:300px 300px;}}.box-page p:nth-child(2),.box-page p:nth-child(4),.box-page p:nth-child(6),.box-page p:nth-child(8){transform:rotateX(0deg);animation: rotatex 10s linear infinite;}@keyframes rotatex{20%{transform: rotateX(0deg);background-size: 300px 300px;}40%{/*background-image: url("img/img.jpg");*/transform: rotateX(540deg);background-size: 100px 100px;}60%{/*background-image: url("img/img.jpg");*/transform: rotateX(540deg);background-size: 100px 100px;}80%{transform: rotateX(0deg);background-size: 300px 300px;}}</style></head><body><p class="container"><p class="box"><p class="top box-page"></p><p class="bottom box-page"></p><p class="left box-page"></p><p class="right box-page"></p><p class="before box-page"></p><p class="after box-page"></p></p></p><script type="text/javascript">var arr = document.querySelectorAll(".box>p");for(var n = 0;n<arr.length;n++){for(var i=0;i<3;i++){for(var j=0;j<3;j++){var ps = document.createElement("p");ps.style.cssText = "width:100px;height:100px;border: 1px solid #fff;position:absolute;box-sizing:border-box;background-image:url(img/a"+n+".jpg);background-size: 300px 300px;";arr[n].appendChild(ps);// 改变每一个p的位置ps.style.left = 100*j+"px";ps.style.top = 100*i+"px";// 改变背景图相应的位置ps.style.backgroundPositionX = -j*100+"px";ps.style.backgroundPositionY = -i*100+"px";}}}</script></body></html>
这是所有源码，魔方六个面的图片是自己定义的，与.html文件一起放一个名为img的文件夹即可，六张图片的命名为a0-a5的jpg格式，这是我目前设定的，这些都可以自己改动。
有什么问题可以联系QQ：505417246
关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
微信便捷交流