1、HTML代碼塊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</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>
2、css代碼塊
* {
margin: 0;
padding: 0;
}
.container {
width: 300px;
height: 300px;
/*border: 1px solid #000;*/
margin: 150px auto;
}
.box {
width: 300px;
height: 300px;
transform-style: preserve-3d;
position: relative;
/*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;
transform-style: preserve-3d;
box-sizing: border-box;
/*位置初始化*/
position: absolute;
}
.top {
transform: translateZ(150px);
}
.bottom {
transform: translateZ(-150px) rotateX(180deg);
}
.left {
transform: translateX(-150px) rotateY(-90deg);
}
.right {
transform: translateX(150px) rotateY(90deg);
}
.before {
transform: translateY(150px) rotateX(-90deg);
}
.after {
transform: translateY(-150px) rotateX(90deg);
}
.box-page div:first-child,.box-page div:nth-child(3),.box-page div:nth-child(5),.box-page div:nth-child(7),.box-page div:nth-child(9){
animation: myframesy 4s ease-in;
}
.box-page div:nth-child(2),.box-page div:nth-child(4),.box-page div:nth-child(6),.box-page div:nth-child(8){
animation: myframesx 4s ease-in 0.5s;
}
@keyframes myframesy {
0% {
transform: translateY(0px) scale(1) rotateY(0deg);
}
20% {
transform: translateY(300px) scale(0) rotateY(360deg);
}
90% {
transform: translateY(300px) scale(0) rotateY(720deg);
}
100% {
transform: translateY(0px) scale(1) rotateY(0deg);
}
}
@keyframes myframesx {
0% {
transform: translateX(0px) scale(1) rotateX(0deg);
}
20% {
transform: translateX(300px) scale(0) rotateX(360deg);
}
90% {
transform: translateX(300px) scale(0) rotateX(720deg);
}
100% {
transform: translateX(0px) scale(1) rotateX(0deg);
}
}
3、Jquery代碼塊
var itemPage = document.querySelectorAll(".box-page");
//遍歷六個面中的每一個面
for(var i = 0; i < itemPage.length; i++) {
//外層循環行
for(var j = 0; j < 3; j++) {
//內層循環遍歷
for(var k = 0; k < 3; k++) {
//創建魔方元素
var divs = document.createElement("div");
divs.style.cssText = "width:100px;height:100px;border:2px solid #fff;box-sizing:border-box;position:absolute;background-image: url(img/a" + i + ".jpg);background-size:300px 300px;";
itemPage[i].appendChild(divs);
divs.style.left = k * 100 + "px";
divs.style.top = j * 100 + "px";
divs.style.backgroundPositionX = -k * 100 + "px";
divs.style.backgroundPositionY = -j * 100 + "px";
}
}
}
效果圖如下：
