成品
第一步構建框架(六個面)
<<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>愛情魔方</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#container{
width:300px;
height:300px;
margin:200px auto;
}
.box{
width: 300px;
height: 300px;
/*居中顯示*/
}
.box-page{
width: 300px;
height: 300px;
}
.top{
background-color: red;
/*transform: translateZ(150px);*/
}
.bottom{
background-color: green;
/*transform: translateZ(-150px) rotateX(180deg);*/
}
.right{
background-color: orange;
/*transform: translateX(150px) rotateY(90deg);*/
}
.left{
background-color:pink;
/*transform: translateX(-150px) rotateY(-90deg);*/
}
.after{
background-color: blue;
/*transform: translateY(-150px) rotateX(90deg);*/
}
.before{
background-color: yellow;
/*transform: translateY(150px) rotateX(-90deg);*/
}
</style>
</head>
<body>
<div id="container">
<div class="box">
<div class="top box-page"></div>
<div class="bottom box-page"></div>
<div class="left box-page"></div>
<div class="right box-page"></div>
<div class="before box-page"></div>
<div class="after box-page"></div>
</div>
</div>
</body>
</html>
第二步構建立方體
注意此處需要在非ie瀏覽器打開
此處改變的有1.添加3d轉換代碼transform-style:preserve-3d;和將每一面位置初始化position: absolute;
2.移動和旋轉每一個面，使他們能夠圍成一個立方體
3.爲了更好的觀察立方體，所以設置視角爲#container{}perspective: 2000px;
旋轉盒子在.box{}中添加transform:rotateX(45deg) rotateY(45deg) ;讓盒子有3d可觀察
<<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>愛情魔方</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#container{
width:300px;
height:300px;
/*order:1px solid #000;*/
margin: 150px auto;
perspective: 2000px;
}
.box{
width: 300px;
height: 300px;
/*子元素保持3d轉換*/
/*transform-style:preserve-3d;*/
transform-style:preserve-3d;
/*測試代碼*/
transform:rotateX(45deg) rotateY(45deg) ;
}
.box-page{
width: 300px;
height: 300px;
/*位置初始化*/
position: absolute;
}
.top{
background-color: red;
-webkit-transform: translateZ(150px);
-ms-transform: translateZ(150px);
-o-transform: translateZ(150px);
transform: translateZ(150px);
}
.bottom{
background-color: green;
-webkit-transform: translateZ(-150px) rotatex(180deg);
-ms-transform: translateZ(-150px) rotatex(180deg);
-o-transform: translateZ(-150px) rotatex(180deg);
transform: translateZ(-150px) rotatex(180deg);
}
.right{
background-color: orange;
-webkit-transform: translateX(150px) rotateY(90deg);
-ms-transform:translateX(150px) rotateY(90deg) ;
-o-transform:translateX(150px) rotateY(90deg) ;
transform:translateX(150px) rotateY(90deg);*/
}
.left{
background-color:pink;
-webkit-transform: translateX(-150px) rotateY(-90deg);
-ms-transform: translateX(-150px) rotateY(-90deg);
-o-transform: translateX(-150px) rotateY(-90deg);
transform: translateX(-150px) rotateY(-90deg);
}
.before{
background-color: blue;
-webkit-transform: translateY(150px) rotateX(-90deg);
-ms-transform: translateY(150px) rotateX(-90deg);
-o-transform: translateY(150px) rotateX(-90deg);
transform: translateY(150px) rotateX(-90deg);
/*transform: translateY(150px) rotateX(-90deg);*/
}
.after{
background-color: yellow;
-webkit-transform: translateY(90px) rotateX(90deg);
-ms-transform: translateY(90px) rotateX(90deg);
-o-transform: translateY(90px) rotateX(90deg);
transform: translateY(90px) rotateX(90deg);
/*transform: translateY(150px) rotateX(-90deg);*/
}
</style>
</head>
<body>
<div id="container">
<div class="box">
<div class="top box-page"></div>
<div class="bottom box-page"></div>
<div class="left box-page"></div>
<div class="right box-page"></div>
<div class="before box-page"></div>
<div class="after box-page"></div>
</div>
</div>
</body>
</html>
第三步綁定圖片and加動畫
注意1.設置動畫是需將每一個box-page設置成：transform-style:preserve-3d;這樣纔可以有3d動畫。
2.url(img/a"+i+".jpg);注意雙引號的位置。
3.圖片背景位置綁定時請注意行列爲負數
<<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>愛情魔方</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#container{
width:300px;
height:300px;
/*order:1px solid #000;*/
margin: 150px auto;
perspective: 2000px;
}
.box{
width: 300px;
height: 300px;
/*子元素保持3d轉換*/
/*transform-style:preserve-3d;*/
transform-style:preserve-3d;
/*測試代碼*/
/*transform:rotateX(45deg) rotateY(45deg) ;*/
animation: ro 4s linear infinite;
}
@keyframes ro{
0%{
-webkit-transform: rotateX(0deg) rotateY(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg);
-o-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
}
100%{
-webkit-transform: rotateX(360deg) rotateY(360deg);
-ms-transform: rotateX(360deg) rotateY(360deg);
-o-transform: rotateX(360deg) rotateY(360deg);
transform: rotateX(360deg) rotateY(360deg);
}
}
.box-page{
width: 300px;
height: 300px;
/*位置初始化*/
position: absolute;
}
.top{
transform-style:preserve-3d;
/*background-color: red;*/
-webkit-transform: translateZ(150px);
-ms-transform: translateZ(150px);
-o-transform: translateZ(150px);
transform: translateZ(150px);
}
.bottom{
transform-style:preserve-3d;
/*background-color: green;*/
-webkit-transform: translateZ(-150px) rotatex(180deg);
-ms-transform: translateZ(-150px) rotatex(180deg);
-o-transform: translateZ(-150px) rotatex(180deg);
transform: translateZ(-150px) rotatex(180deg);
}
.right{
transform-style:preserve-3d;
/*background-color: orange;*/
-webkit-transform: translateX(150px) rotateY(90deg);
-ms-transform:translateX(150px) rotateY(90deg) ;
-o-transform:translateX(150px) rotateY(90deg) ;
transform:translateX(150px) rotateY(90deg);*/
}
.left{
transform-style:preserve-3d;
/*background-color:pink;*/
-webkit-transform: translateX(-150px) rotateY(-90deg);
-ms-transform: translateX(-150px) rotateY(-90deg);
-o-transform: translateX(-150px) rotateY(-90deg);
transform: translateX(-150px) rotateY(-90deg);
}
.before{
transform-style:preserve-3d;
/*background-color: blue;*/
-webkit-transform: translateY(150px) rotateX(-90deg);
-ms-transform: translateY(150px) rotateX(-90deg);
-o-transform: translateY(150px) rotateX(-90deg);
transform: translateY(150px) rotateX(-90deg);
/*transform: translateY(150px) rotateX(-90deg);*/
}
.after{
transform-style:preserve-3d;
/*background-color: yellow;*/
-webkit-transform: translateY(-150px) rotateX(90deg);
-ms-transform: translateY(-150px) rotateX(90deg);
-o-transform: translateY(-150px) rotateX(90deg);
transform: translateY(-150px) 5rotateX(90deg);
/*transform: translateY(150px) rotateX(-90deg);*/
}
.box-page div:nth-child(1){
animation: a1 4.5s ease-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 2s;
}
.box-page div:nth-child(5){
animation: a1 4.5s ease-in 3s;
}
.box-page div:nth-child(6){
animation: a1 4.5s ease-in 4s;
}
.box-page div:nth-child(7){
animation: a1 4.5s ease-in 5s;
}
.box-page div:nth-child(8){
animation: a1 4.5s ease-in 6s;
}
.box-page div:nth-child(9){
animation: a1 4.5s ease-in 7s;
}
@keyframes a1{
0%{
-webkit-transform: translateZ(0px) scale(1) rotateZ(0deg);
-ms-transform: translateZ(0px) scale(1) rotateZ(0deg);
-o-transform: translateZ(0px) scale(1) rotateZ(0deg);
transform: translateZ(0px) scale(1) rotateZ(0deg);
}
20%{
-webkit-transform: translateZ(300px) scale(0) rotateZ(720deg);
-ms-transform: translateZ(300px) scale(0) rotateZ(720deg);
-o-transform: translateZ(300px) scale(0) rotateZ(720deg);
transform: translateZ(300px) scale(0) rotateZ(720deg);
}
90%{
-webkit-transform: translateZ(300px) scale(0) rotateZ(720deg);
-ms-transform: translateZ(300px) scale(0) rotateZ(720deg);
-o-transform: translateZ(300px) scale(0) rotateZ(720deg);
transform: translateZ(300px) scale(0) rotateZ(720deg);
}
100%{
-webkit-transform: translateZ(0px) scale(1) rotateZ(0deg);
-ms-transform: translateZ(0px) scale(1) rotateZ(0deg);
-o-transform: translateZ(0px) scale(1) rotateZ(0deg);
transform: translateZ(0px) scale(1) rotateZ(0deg);
}
}
</style>
</head>
<body>
<div id="container">
<div class="box">
<div class="top box-page"></div>
<div class="bottom box-page"></div>
<div class="left box-page"></div>
<div class="right box-page"></div>
<div class="before box-page"></div>
<div class="after box-page"></div>
</div>
</div>
<script type="text/javascript" >
var arr=document.querySelectorAll(".box-page");
//便利6個面中的每一個面
for (var i =0; i <arr.length; i++) {
//外層循環行
for(var r=0;r<3;r++){
//內存循環遍歷列
for(var c=0;c<3;c++){
//創建元素
var divs=document.createElement("div");
//千萬不要出現中文分號錯誤
divs.style.cssText = "width:100px;height:100px;border: 1px solid #fff;position:absolute;box-sizing:border-box;background-image:url(img/a"+i+".jpg);background-size:300px 300px;";
arr[i].appendChild(divs);
divs.style.left=c*100+"px";
divs.style.top=r*100+"px";
divs.style.backgroundPositionX=-c*100+"px";//爲啥是負的呢？
divs.style.backgroundPositionY=-r*100+"px";
}
}
}
</script>
</body>
</html>
參考：中國大學mooc網，北京林業大學的《web前端開發》課程。