html商城魔方,[ Demo ] HTML/CSS/JS 炫酷魔方

先来展示一下效果吧～

文件夹目录

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

标签：box,translateZ,魔方,Demo,transform,300px,JS,div,page

来源： https://blog.csdn.net/qq_45027204/article/details/105350384