旋转魔方效果如图
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="box"> <div class="box-page top"></div> <div class="box-page bottom"></div> <div class="box-page left"></div> <div class="box-page right"></div> <div class="box-page after"></div> <div class="box-page before"></div> </div> </div> <script type="text/javascript"> var arr = document.querySelectorAll(".box-page"); //共六面，分别添加图片 for(var page = 0; page < 6; page++){ //每面九个小格 //魔方行 for(var h = 0; h < 3; h++){ //魔方列 for(var l = 0; l < 3; l++){ var div = document.createElement("div"); //修改图片路径在url()的括号里，文件名分别为a0.jpg , a1.jpg... div.style.cssText = "100px;height:100px;border:2px solid white;box-size:border-box;position:absolute;background-size:300px 300px;background-image:url(img/a" +page +".jpg)"; arr[page].appendChild(div); div.style.left = l*100 + "px"; div.style.top = h*100 + "px"; div.style.backgroundPositionX = -l*100 + "px"; div.style.backgroundPositionY = -h*100 + "px"; } } } </script> </body> </html>
*{
padding: 0px;
margin: 0px;
}
html{
background-color: pink;
}
.container{
300px;
height: 300px;
margin:150px auto;
perspective:50000px;
}
/*整体*/
.box{
300px;
height: 300px;
transform-style:preserve-3d;
animation:boxRotate 10s linear infinite;
}
/*动画效果*/
/*盒子*/
@keyframes boxRotate{
0%{
transform:rotateX(0deg) rotateY(0deg);
}
100%{
transform:rotateX(360deg) rotateY(360deg);
}
}
/*单图破碎效果*/
.box-page{
transform-style:preserve-3d;
}
.box-page>div:nth-child(1){
animation:aBlock 5s ease-in 0.5s;
}
.box-page>div:nth-child(2){
animation:aBlock 5s ease-in 0.8s;
}
.box-page>div:nth-child(3){
animation:aBlock 5s ease-in 1.1s;
}
.box-page>div:nth-child(4){
animation:aBlock 5s ease-in 1.4s;
}
.box-page>div:nth-child(5){
animation:aBlock 5s ease-in 1.7s;
}
.box-page>div:nth-child(6){
animation:aBlock 5s ease-in 2s;
}
.box-page>div:nth-child(7){
animation:aBlock 5s ease-in 2.3s;
}
.box-page>div:nth-child(8){
animation:aBlock 5s ease-in 2.6s;
}
.box-page>div:nth-child(9){
animation:aBlock 5s ease-in 2.9s;
}
@keyframes aBlock{
0%{
transform:translateZ(0px) scale(1) rotateZ(0deg);
}
30%{
transform:translateZ(200px) scale(0) rotateZ(360deg);
}
70%{
transform:translateZ(200px) scale(0) rotateZ(360deg);
}
100%{
transform:translateZ(0px) scale(1) rotateZ(0deg);
}
}
/*所有页*/
.box-page{
300px;
height: 300px;
position: absolute;
}
/*各页*/
/*.top{
transform:translateZ(150px);
}
.bottom{
transform: translateZ(-150px);
}
.left{
transform: translateY(150px) rotateX(90deg);
}
.right{
transform: translateY(-150px) rotateX(90deg);
}
.after{
transform: translateX(-150px) rotateY(90deg);
}
.before{
transform: translateX(150px) rotateY(90deg);
}*/
.top{
transform:translateZ(-150px);
}
.bottom{
transform: translateZ(150px);
}
.left{
transform: translateX(-150px) rotateY(90deg);
}
.right{
transform: translateX(150px) rotateY(90deg);
}
.after{
transform: translateY(-150px) rotateX(90deg);
}
.before{
transform: translateY(150px) rotateX(90deg);
}
提取文件
链接：https://pan.baidu.com/s/1Oip1dnpwC1teng-ZwmmScQ
提取码：zeu4
复制这段内容后打开百度网盘手机App，操作更方便哦
学习于
https://www.icourse163.org/learn/BJFU-1003382003