[ Demo ] HTML/CSS/JS 炫酷魔方

先来展示一下效果吧~
[ Demo ] HTML/CSS/JS 炫酷魔方

文件夹目录

[ Demo ] HTML/CSS/JS 炫酷魔方

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>炫彩魔方</title>
    <link rel="stylesheet" href="index.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 before"></div>
            <div class="box-page after"></div>
        </div>
    </div>
    <script src="index.js"></script>
</body>
</html>

CSS代码

*{
    margin: 0;
    padding: 0;
}
.container{
    perspective: 20000px;
    width: 300px;
    height: 300px;
    /* border: 1px solid #000; */
    margin: 150px auto;
}
.box{
    width: 300px;
    height: 300px;
    /* 控制子元素保持3D转换 */
    transform-style: preserve-3d;
    transform: rotateX(45deg) rotateY(45deg);
    animation: ro 4s linear infinite;

}
@keyframes ro{
    0%{
        transform: rotateX(0deg) rotateY(0deg);
    }
    100%{
        transform: rotateX(360deg) rotateY(360deg);
    }
}
.box-page{
    width: 300px;
    height: 300px;
    /* 位置初始化 */
    position: absolute;
    transform-style: preserve-3d;
}
.top{
    /* background-color: aqua; */
    transform: rotateX(90deg) translateZ(150px);
}
.bottom{
    /* background-color: pink; */
    transform: rotateX(-90deg) translateZ(150px);
}
.left{
    /* background-color: red; */
    transform: rotateY(90deg) translateZ(150px);
}
.right{
    /* background-color: yellow; */
    transform: rotateY(-90deg) translateZ(150px);
}
.before{
    /* background-color: green; */
    transform: translateZ(150px);
}
.after{
    /* background-color: purple; */
    transform: translateZ(-150px);
}
.box-page div:nth-child(1){
    animation: a1 4.5s ease-in in; 
}
.box-page div:nth-child(2){
    animation: a1 4.5s ease-in 0.5s; 
}
.box-page div:nth-child(3){
    animation: a1 4.5s ease-in 1s; 
}
.box-page div:nth-child(4){
    animation: a1 4.5s ease-in 1.5s; 
}
.box-page div:nth-child(5){
    animation: a1 4.5s ease-in 2s; 
}
.box-page div:nth-child(6){
    animation: a1 4.5s ease-in 2.5s; 
}
.box-page div:nth-child(7){
    animation: a1 4.5s ease-in 3s; 
}
.box-page div:nth-child(8){
    animation: a1 4.5s ease-in 3.5s; 
}
.box-page div:nth-child(9){
    animation: a1 4.5s ease-in 4s; 
}
@keyframes a1{
    0%{
        transform: translateZ(0px) scale(1) rotateZ(0deg);
    }
    20%{
        transform: translateZ(300px) scale(1) rotateZ(720deg);
    }
    90%{
        transform: translateZ(300px) scale(1) rotateZ(720deg);
    }
    100%{
        transform: translateZ(0px) scale(1) rotateZ(0deg);
    }
}

[ Demo ] HTML/CSS/JS 炫酷魔方

JS代码

var arr = document.querySelectorAll(".box-page");
//遍历六个面中的每一个面
for(var n = 0;n < arr.length;n++){
	//遍历每一行 3行
    for(var r = 0;r < 3;r++){
    	//遍历每一列 3列
        for(var c = 0;c < 3;c++){
        	//创建div元素 经过三次for循环 可以每一面生成9个div
            var divs = document.createElement("div");
            //为空的div设置样式
            divs.style.cssText = "width: 100px;height: 100px;border: 2px solid #fff;box-sizing: border-box;background-color:red;position: absolute;background-image:url(img/a"+n+".jpg);background-size: 300px 300px; ";
            //将生成的div添加到Dom树中
            arr[n].appendChild(divs);
            //位于第c列的元素向左移动c*100px
            divs.style.left = c * 100 + "px";
            //位于第r行的元素向上移动r*100px
            divs.style.top = r * 100 + "px";
            //背景图像定位水平方向移动 -c*100px
            divs.style.backgroundPositionX = -c * 100 + "px";
            //背景图像定位垂直方向移动 -r*100px
            divs.style.backgroundPositionY = -r * 100 + "px";
        }
    }
}

实例来源于中国大学MOOC网/Web前端开发/JavaScript基础 魔方实例部分,想看逐一讲解过程可以自行搜索,也可以在下方评论留言哦。如果喜欢记得点赞哦。
[ Demo ] HTML/CSS/JS 炫酷魔方

上一篇:最优化算法python实现篇(4)——无约束多维极值(梯度下降法)


下一篇:TChart-对象查看器与打印预览