先来展示一下效果吧～
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);
}
}
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基础 魔方实例部分，想看逐一讲解过程可以自行搜索，也可以在下方评论留言哦。如果喜欢记得点赞哦。
