今天重新复习了css3的动画部分，做了一个小demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*css3不兼容ie7,ie8*/
*{
margin: 0;
padding: 0;
}
body{
background-color: black;
perspective: 1000px;
/* 调整眼睛的位置*/
perspective-origin: 50% 50%;
}
.container{
position: relative;
margin: 150px auto;
width:200px;
height: 200px;
/*transition: transform 3s linear;*/
transform-style: preserve-3d;
animation: move 3s linear infinite;
/*background-color: red;*/
/* 到这一步没有实现水平居中的原因是 宽度等于浏览器宽度，需要自定义 定义颜色为什么看不到，因为子元素都设置了绝对定位，脱离了文档流*/
}
/*.container:hover{*/
/* transform: rotateY(360deg) ;*/
/*}*/
/*这种方式转完变成平面了 transition 是需要事件进行触发的，所以用animation比较好*/
@keyframes move {
to{
transform: rotateY(360deg);
}
}
.cube{
width :200px;
height: 200px;
background-color: #CCCCCC;
opacity: .5;
border-radius: 5px;
font-size: 70px;
text-align: center;
line-height: 200px;
position: absolute;
top: 0;
left: 0;
}
/*这里·为什么是Z轴，旋转之后的图片每一个都要参照旋转之后的这个坐标系*/
.one{
transform: rotateY(-90deg) translateZ(100px);
/* 保持在三维空间内*/
}
.two{
transform: rotateY(90deg) translateZ(100px);
}
.three{
transform: rotateX(90deg) translateZ(100px);
}
.four{
transform: rotateX(-90deg) translateZ(100px);
}
.five{
transform: rotateY(180deg) translateZ(100px);
}
.six{
transform: translateZ(100px);
}
</style>
</head>
<body>
<div class="container">
<div class="cube one">1</div>
<div class="cube two">2</div>
<div class="cube three">3</div>
<div class="cube four">4</div>
<div class="cube five">5</div>
<div class="cube six">6</div>
</div>
</body>
</html>
