<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
top: 0;
}
.container {
width: 300px;
height: 300px;
margin: 150px auto;
/* border: 1px solid #000; */
perspective: 200000;
}
.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;
font-size: 100px;
text-align: center;
line-height: 300px;
transform-style: preserve-3d;
}
.top {
/* background-color: blue; */
transform: translateZ(150px);
}
.bottom {
/* background-color: orange; */
transform: translateZ(-150px) rotateX(180deg);
}
.left {
/* background-color: rgb(47, 196, 255); */
transform: translateX(-150px) rotateY(-90deg);
}
.right {
/* background-color: red; */
transform: translateX(150px) rotateY(90deg);
}
.before {
/* background-color: lawngreen; */
transform: translateY(150px) rotateX(-90deg);
}
.after {
/* background-color: gray; */
transform: translateY(-150px) rotateX(90deg);
}
@keyframes a1 {
0% {
transform: translateZ(0px) scale(1) rotateZ(0deg);
}
20% {
transform: translateZ(300px) scale(0) rotateZ(720deg);
}
90% {
transform: translateZ(300px) scale(0) rotateZ(720deg);
}
100% {
transform: translateZ(0px) scale(1) rotateZ(0deg);
}
}
.box-page div:nth-child(1) {
animation: a1 6s ease-in 0.5s;
}
.box-page div:nth-child(2) {
animation: a1 6s ease-in 1s;
}
.box-page div:nth-child(3) {
animation: a1 6s ease-in 1.5s;
}
.box-page div:nth-child(4) {
animation: a1 6s ease-in 2s;
}
.box-page div:nth-child(5) {
animation: a1 6s ease-in 2.5s;
}
.box-page div:nth-child(6) {
animation: a1 6s ease-in 3s;
}
.box-page div:nth-child(7) {
animation: a1 6s ease-in 3.5s;
}
.box-page div:nth-child(8) {
animation: a1 6s ease-in 4s;
}
.box-page div:nth-child(9) {
animation: a1 6s ease-in 4.5s;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="top box-page">1</div>
<div class="bottom box-page">2</div>
<div class="left box-page">3</div>
<div class="right box-page">4</div>
<div class="before box-page">5</div>
<div class="after box-page">6</div>
</div>
</div>
<script>
var arr = document.querySelectorAll(".box-page")
// 遍历六个面的每一个面
for (var n = 0; n < 6; n++) {
// 外层循环遍历行
for (var i = 0; i < 3; i++) {
// 内层循环遍历列
for (var j = 0; j < 3; j++) {
var divs = document.createElement("div");
divs.style.cssText = "width:100px;height:100px;background-color:red;border:2px solid #fff;position: absolute;box-sizing:border-box;background-image:url(image/a" + n + ".JPG);background-size:300 px 300 px";
arr[n].appendChild(divs);
divs.style.left = j * 100 + "px";
divs.style.top = i * 100 + "px";
divs.style.backgroundPositionX = -j * 100 + "px";
divs.style.backgroundPositionY = -i * 100 + "px";
}
}
}
</script>
</body>
</html>
爱情魔方
最新推荐文章于 2020-06-28 12:22:36 发布