旋转魔方(2)-添加照片

旋转魔方效果如图

<!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