HTML+CSS+JS实现美女照片3D立方体旋转特效

🍅 作者主页：Java李杨勇

🍅 简介：Java领域优质创作者🏆、Java李阳勇 公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】

🍅 欢迎点赞 👍 收藏 ⭐留言 📝

效果演示： 文末获取源码

代码目录：

主要代码实现：

CSS样式：

body {/*background: url(../img/preview.png) ;*/max-width: 100%;min-width: 100%;height: 100%;background-size: cover;background-repeat: no-repeat;background-attachment: fixed;background-size: 100% 100%;position: absolute;margin-left: auto;margin-right: auto;
}li {list-style: none;
}.box {width: 200px;height: 200px;background-size: cover;background-repeat: no-repeat;background-attachment: fixed;background-size: 100% 100%;position: absolute;margin-left: 42%;margin-top: 22%;-webkit-transform-style: preserve-3d;-webkit-transform: rotateX(13deg);-webkit-animation: move 5s linear infinite;
}.minbox {width: 100px;height: 100px;position: absolute;left: 50px;top: 30px;-webkit-transform-style: preserve-3d;
}.minbox li {width: 100px;height: 100px;position: absolute;left: 0;top: 0;
}.minbox li:nth-child(1) {background: url(../img/01.png) no-repeat 0 0;-webkit-transform: translateZ(50px);
}.minbox li:nth-child(2) {background: url(../img/02.png) no-repeat 0 0;-webkit-transform: rotateX(180deg) translateZ(50px);
}.minbox li:nth-child(3) {background: url(../img/03.png) no-repeat 0 0;-webkit-transform: rotateX(-90deg) translateZ(50px);
}.minbox li:nth-child(4) {background: url(../img/04.png) no-repeat 0 0;-webkit-transform: rotateX(90deg) translateZ(50px);
}.minbox li:nth-child(5) {background: url(../img/05.png) no-repeat 0 0;-webkit-transform: rotateY(-90deg) translateZ(50px);
}.minbox li:nth-child(6) {background: url(../img/06.png) no-repeat 0 0;-webkit-transform: rotateY(90deg) translateZ(50px);
}.maxbox li:nth-child(1) {background: url(../img/1.png) no-repeat 0 0;-webkit-transform: translateZ(50px);
}.maxbox li:nth-child(2) {background: url(../img/2.png) no-repeat 0 0;-webkit-transform: translateZ(50px);
}.maxbox li:nth-child(3) {background: url(../img/3.png) no-repeat 0 0;-webkit-transform: rotateX(-90deg) translateZ(50px);
}.maxbox li:nth-child(4) {background: url(../img/4.png) no-repeat 0 0;-webkit-transform: rotateX(90deg) translateZ(50px);
}.maxbox li:nth-child(5) {background: url(../img/5.png) no-repeat 0 0;-webkit-transform: rotateY(-90deg) translateZ(50px);
}.maxbox li:nth-child(6) {background: url(../img/6.png) no-repeat 0 0;-webkit-transform: rotateY(90deg) translateZ(50px);
}.maxbox {width: 800px;height: 400px;position: absolute;left: 0;top: -20px;-webkit-transform-style: preserve-3d;
}.maxbox li {width: 200px;height: 200px;background: #fff;border: 1px solid #ccc;position: absolute;left: 0;top: 0;opacity: 0.2;-webkit-transition: all 1s ease;
}

HTML代码 :

上面的图片文件需要引入