1.style样式
/*三维视角*/
.D3-frame{
height:100%;
width:100%;
-webkit-perspective:800;
-webkit-perspective-origin:50% 50%;
overflow:hidden;
perspective:800;
perspective-origin:50% 50%;
}
/*水平旋转*/
@keyframes spin {
from { transform: rotateY(0); }
to { transform: rotateY(360deg); }
}
/*垂直旋转*/
@keyframes spin1 {
from { transform: rotateX(0); }
to { transform: rotateX(360deg); }
}
/*三维视图 水平旋转*/
#D3-grounp{
width:400px;
height:400px;
-webkit-transform-style:preserve-3d;
position:relative;
margin:20% auto;
-webkit-transform:rotateY(0deg);
animation: spin 5s infinite linear;
}
.D3-grounp-verticle{
width:400px;
height:400px;
-webkit-transform-style:preserve-3d;
position:relative;
margin:20% auto;
-webkit-transform:rotateY(0deg);
animation: spin1 5s infinite linear!important;
}
/*个个边的属性*/
.page{
font-size:200px;
font-weight:bold;
padding:20px;
color:white;
width:200px;
height:200px;
text-align:center;
line-height:200px;
position:absolute;
}
/*前面*/
#front {
-webkit-transform: translateZ(140px);
background:yellow;
opacity:0.5;
}
/*后面*/
#back {
transform: translateZ(-100px) rotateY(180deg);
-webkit-transform: tr
anslateZ(-100px) rotateY(180deg);
background:red;
opacity:0.5;
}
/*右面*/
#right {
-webkit-transform: rotateY(-270deg) translateX(100px);
-webkit-transform-origin: top right;
background:blue;
opacity:0.5;
}
/*左面*/
#left {
-webkit-transform:translateZ(-100px) rotateY(-90deg) ;
-webkit-transform-origin: left top;
background:#DC8;
opacity:0.5;
}
/*中间的图片*/
#mid{
-webkit-transform: translateZ(20px);
-webkit-transform-origin:left top;
background-image:url("../image/middle.jpg");
background-size:100% 100%;
}
/*上面*/
#up{
-webkit-transform: rotateX(90deg) translateY(-100px);
-webkit-transform-origin: left top;
background:black;
opacity:0.5;
}
/*下面*/
#down{
-webkit-transform:translateZ(-100px) rotateX(-90deg) ;
-webkit-transform-origin: bottom center;
background:#DDD;
opacity:0.5;
}
2.html文件
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="./style/mystyle.css" />
<script src="./js/jquery-1.11.1.js"></script>
<script src="./js/main.js"></script>
</head>
<body>
<header>
</header>
<div class="D3-frame">
<div class="" id="D3-grounp">
<div class="page" id="left">1</div>
<div class="page" id="right">2</div>
<div class="page" id="up">3</div>
<div class="page" id="mid"> </div>
<div class="page" id="down">4</div>
<div class="page" id="back">5</div>
<div class="page" id="front">6</div>
</div>
</div>
</body>
</html>
3.js文件
$(function(){
setInterval(function()
{
$("#D3-grounp").toggleClass("D3-grounp-verticle");
},3000);
})