<!DCOTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html ;charset=utf-8">
<title>
3D空间六面体
</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
h1{
text-align:center;
margin:10px 0 0 0;
color:blue;
}
#view{
perspective:500px;/*创建一个3D视角*/
width:200px;
height:200px;
margin:250px auto;/*设置一个3D空间的大小和位置*/
}
@-webkit-keyframes scroll{
100%{
-webkit-transform:rotate3d(1,1,1,360deg);/*创建一个包含六面体的空间旋转动画*/
}
}
#contain{
width:200px;
height:200px;
position:relative;/*创建一个相对定位的包含六面体的空间*/
-webkit-transform-style:preserve-3d;/*添加3D动画属性，如果没有的话，会显示不出3D特效*/
-webkit-animation:scroll 2s linear 7s infinite;/*设置动画属性：动画名称，时间，速度，延迟时间，次数*/
}
.face{
width:200px;
height:200px;
background:yellow;
border:1px solid black;
font-size:150px;
text-align:center;
position:absolute;
}
@-webkit-keyframes face1{
100%{
-webkit-transform:rotateY(-90deg);/*旋转90度*/
-webkit-transform-origin:left;/*以左边为轴旋转*/
}
}
#face1{
z-index:6;/*设置层叠优先级，数值越大，越靠近上层*/
opacity:0.5;
-webkit-animation:face1 1s linear 1s both;
}
@-webkit-keyframes face2{
100%{
-webkit-transform:rotateY(90deg);
-webkit-transform-origin:right;
}
}
#face2{
z-index:5;
opacity:0.5;
-webkit-animation:face2 1s linear 2s both;
}
@-webkit-keyframes face3{
100%{
-webkit-transform:rotateX(90deg);
-webkit-transform-origin:top;
}
}
#face3{
z-index:4;
opacity:0.5;
-webkit-animation:face3 1s linear 3s both;
}
@-webkit-keyframes face4{
100%{
-webkit-transform:rotateX(-90deg);
-webkit-transform-origin:bottom;
}
}
#face4{
z-index:3;
opacity:0.5;
-webkit-animation:face4 1s linear 4s both;
}
@-webkit-keyframes face5{
100%{
-webkit-transform:translateZ(200PX);
}
}
#face5{
z-index:2;
opacity:0.5;
-webkit-animation:face5 1s linear 5s both;
}
@-webkit-keyframes face6{
100%{
-webkit-transform:rotateY(180deg);
}
}
#face6{
z-index:1;
opacity:0.5;
-webkit-animation:face6 1s linear 6s both;
}
</style>
</head>
<body>
<h1>3D空间六面体</h1>
<div id="view">
<div id="contain">
<div id="face1" class="face">1</div>
<div id="face2" class="face">2</div>
<div id="face3" class="face">3</div>
<div id="face4" class="face">4</div>
<div id="face5" class="face">5</div>
<div id="face6" class="face">6</div>
</div>
</div>
</body>
</html>
