3D空间六面体 

<!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>

　　

posted @ 2017-11-02 21:54  亲亲的我来了  阅读(248)  评论(0)    收藏  举报