transition主要是从一个属性平滑过渡到另一个属性，而animate则是结合关键帧技术，实现更加复杂的动画效果；
transion:过渡属性名称 过渡时间
谷歌、opera、火狐、苹果浏览器不支持，注意兼容性
-webkit-transition: color 1s;
<style>
#block{
width:400px;
height:400px;
background-color: blue;
margin:0 auto;
}
#block:hover{
background-color: red;
}
</style>
</head>
<body>
<div id="block">
</div>
</body>鼠标悬停上去之后，块状元素的背景颜色立即由蓝色变成红色，如果要实现平滑过渡，只需要在#block上添加一个过去属性-webkit-transition: background-color 3s;，如何添加在#block:hover上，那么就会hover的时候有3s的过渡，失去焦点后，立马变成blue，没有过渡效果；
上面其实是两个属性写在一起，分开写是这样的：;
transition-property：color
transition-duration:1s;那么如何设置多个属性的过渡效果呢？
<style>
#block{
width:400px;
height:400px;
background-color: blue;
margin:0 auto;
-webkit-transition: background-color 3s linear , height 2s linear;
}
#block:hover{
background-color: red;
height:600px;
}
</style>
</head>
<body>
<div id="block">
</div>
</body>
translateX是从屏幕左边到右边；translateY是从上边到下边；translateZ是从屏幕外到里边；外为负数，越大，里为正数，表示越远；rotateX和rotateY都是分别沿着x轴中心与y轴中心逆时针为正，rotateZ是沿着顺时针为正；
使用css3创建简单的3d场景
perspective: 500px;//3D物体距屏幕的距离
perspective-origin: 10% 10%;//3D元素基点基于X,Y轴的位置
transform:rotate(45deg);//2D/3D转换，旋转，缩放，移动或倾斜<style>
#experiment{
-webkit-perspective: 800; //视距深度
-webkit-perspective-origin: 50% 50%; //视距中心
-webkit-transform-style:-webkit-preserve-3d;//3d场景
}
#block{
width:500px;
height:500px;
background-color: #69c;
margin:100px auto;
-webkit-transform:rotateZ(45deg);
}
</style>
</head>
<body>
<div id="experiment">
<div id="block">
</div>
</div>
</body>
### 综合实例：
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>3d场景演示</title>
<style>
#space3d{
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 50%;
overflow:hidden;
}
#container{
height: 400px;
width: 400px;
position: relative;
margin: 0px auto;
-webkit-transform-style:preserve-3d;
}
.page{
height: 360px;
width:360px;
padding: 20px;
position: absolute;
background-color: #000;
color: #FFF;
font-weight: bold;
font-size: 360px;
text-align: center;/* 垂直居中 */
line-height: 360px;/* 水平居中 */
-webkit-transform-origin:bottom;
-webkit-transition: -webkit-transform 1s linear;
}
#page2,#page3,#page4,#page5,#page6{
-webkit-transform: rotateX(90deg);
}
#btnoption{
margin: 40px auto;
text-align: center;/* ... */
}
</style>
</head>
<body>
<div id="space3d">
<div id="container">
<div class="page" id = "page1">1</div>
<div class="page" id = "page2">2</div>
<div class="page" id = "page3">3</div>
<div class="page" id = "page4">4</div>
<div class="page" id = "page5">5</div>
<div class="page" id = "page6">6</div>
</div>
</div>
<div id="btnoption">
<button id="next" value="next" onclick="next()">next</button>
<button id="prev" value="previous" onclick="prev()">prev</button>
</div>
<script>
var currentIndex = 1;
function next(){
if(currentIndex == 6){
return;
}
var currntPage = document.getElementById(‘page‘ + currentIndex);
currntPage.style.webkitTransform = "rotateX(-90deg)";
var nextPage = document.getElementById(‘page‘ + ++ currentIndex);
nextPage.style.webkitTransform = ‘rotateX(0deg)‘;
}
function prev(){
if(currentIndex == 1){
return;
}
var currntPage = document.getElementById(‘page‘ + currentIndex);
currntPage.style.webkitTransform = "rotateX(90deg)";
var prevPage = document.getElementById(‘page‘ + -- currentIndex);
prevPage.style.webkitTransform = ‘rotateX(0deg)‘;
}
</script>
</body>
原文：http://blog.csdn.net/i10630226/article/details/53994827