CSS3： transition
-webkit-transition在Chrome Safari浏览器中使用
-o-transition在Operae浏览器中使用
transition: 过渡属性名称，过渡时间，过渡模式
过渡模式有以下几种：
linear 匀速
ease-in 缓慢开始
ease-out 缓慢结束
ease-in-out 缓慢开始，缓慢结束
3D：
-webkit-perspective-origin(屏幕的X和Y的位置）
告诉电脑，我的转换方式是以3D的模式去转换
-webkit-transform-style:webkit-preserve-3d;
有以下几种转换方式
/*X是屏幕向左，Y是屏幕向下，Z是屏幕向外*/
translate（X,Y,Z）沿着三条轴去平移
rotateX（90deg）向X轴正方向旋转九十度
可以是X轴的left center right（代表左、中、右）
也可以是Y轴的top center bottom（代表上、中、下）
也可以是Z轴的length px（代表Z轴深度）
贴代码：
<!DOCTYPE html>
<html>
<head>
<title>3Dtest</title>
<meta charset="utf-8">
<style type="text/css">
#test{
-webkit-perspective: 800px;
-webkit-perspective-origin:50% 50%;
overflow: hidden;
text-align: center;
}
#m_page{
width: 500px;
height:400px;
margin-left: 400px;
-webkit-transform-style:preserve-3d;
}
.page{
width: 500px;
height: 400px;
background-color: black;
color: white;
text-align: center;
position: absolute;
}
#page1,#page2,#page3,#page4,#page5,#page6{
-webkit-transform-origin:right;
-webkit-transform:rotateY(180deg);
-webkit-transition:-webkit-transform 1s linear;
}
#op{
margin-left: 500px;
}
</style>
<script type="text/javascript">
var index=0;
function next()
{
if(index==0)
{
}
else{
var front=document.getElementById("page"+index);
front.style.webkitTransform="rotateY(-90deg)";
}
index++;
var last=document.getElementById("page"+index);
last.style.webkitTransform="rotateY(0deg)"
}
function pre()
{
var front=document.getElementById("page"+index);
front.style.webkitTransform="rotateY(180deg)";
index--;
var last=document.getElementById("page"+index);
last.style.webkitTransform="rotateY(0deg)"
}
</script>
</head>
<body>
<div id="test">
<h1>DRAW</h1>
<div id="books">
<div id="m_page">
<div class="page" id="page1"><img src="images/1.jpg"/></div>
<div class="page" id="page2"><img src="images/2.jpg"/></div>
<div class="page" id="page3"><img src="images/3.jpg"/></div>
<div class="page" id="page4"><img src="images/4.jpg"/></div>
<div class="page" id="page5"><img src="images/5.jpg"/></div>
<div class="page" id="page6"><img src="images/6.jpg"/></div>
</div><!-- page结束 -->
</div><!-- books结束 -->
</div><!--3dtest结束-->
<div id="op">
<button type="button" id="next" onclick="next()">下一页</button>
<button type="button" id="pre" onclick="pre()">上一页</button>
</div><!-- op结束 -->
</body>
</html>
