🍅 作者主页：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代码 :
上面的图片文件需要引入
源码获取
大家可以点赞、收藏、关注、评论我啦 、查看博主主页或下方微信公众号获取~！
打卡 文章 更新44/ 100天
精彩推荐更新中：
HTML5大作业实战案例《100套》
Java毕设项目精品实战案例《100套》
