css3 过渡，转换和动画
在网络快速发展的今天，静态web页面早已经不满足人们的需求，因此我们需要更加炫酷的动画渲染页面，使得我们的页面逼格满满，在css3中动画的表现形式有 过渡， 2d动画和 3d动画，给用户一种耳目一新的全新体验。
过渡（transition）
个人理解的过渡指的是某种元素的某种状态在一定的时间段内发生的变化叫做过渡。
div:hover{
width: 200px;
height: 200px;
}
当我们鼠标移动到div元素中元素放大，此时感觉很突兀，我们给它一点过渡的效果。
transition: all 3s;
transition：style，timestyle：过渡的样式，也可以设置all全部样式。time：设置过渡的时间，单位为秒（s）。
设置过渡的切换速度（transition-timing-function）
linear：全程以相同的速度过渡
ease：先慢速，然后变快，在慢速的过渡。
ease-in：以慢速开始的过渡。
ease-out：以慢速结束的过渡。
ease-in-out：以慢速开始和慢速结束的过渡。
关于linear我们很容易理解，但是关于ease我们还是不能够很形象的看懂，来看一下曲线的路径。
转换（transform）
2D转换
在2D转换中，我们想象页面为一个2D平面，在这个平面里我们可以有移动（translate），旋转（rotate），缩放（scale）和倾斜（skew）的方法。
设置元素的参考点（transform-origin）
当然在我们做转换的过程中，我们是有着一个参考点，我们需要依据参考点来进行转换，因此我们也可以来设置参考点。
transform-origin: x y;
x，y的除了可以设置百分比和具体的位置外；
x轴的位置可以设置为left，center，right；
y轴的位置可以位置为top，center，bottom。
移动（translate）
transform: translate(100px,100px);
设置元素在x轴与y轴偏移的位置，以下将元素向x轴移动了100px，向y轴移动了100px。灰色元素仅做对照使用，黑色元素为移动后的元素。
旋转（rotate）
transform: rotate(45deg);
设置元素顺时针旋转，以下讲元素旋转了45°。
缩放（scale）
transform: scale(1.5,2);
缩放是将原元素按照设置的倍数进行缩放。以下x放大1.5倍，y放大2倍。
倾斜（skew）
transform: skew(15deg);
将元素倾斜15度。
3D转换
在2D转转换中，我们无非只是一种视觉的原因，让我们看起来不那么形象具体，在现实生活中3D能够看到更加形象具体的的图像无非是人在不同的方向距离的状态下看到的不同的图像从而感受到3D的图像，而在我们的JavaScript中也是模拟了人看物体的景深（perspective），位置（perspective-origin），并且开启3D状态（transform-style: preserve-3d）。
开启3D状态（transform-style: preserve-3d）
在进行3d装换时需要先设置父容器为3d状态才浏览器才会进行3d显示。
景深（perspective）
景深就是设置眼睛距离位置的视距。
<div>
<div></div>
<h3>0</h3>
</div>
div{
/*设置3d视角*/
transform-style: preserve-3d;
}
div>div{
width: 100px;
height: 100px;
background-color: rgba(255,0,0,0.5);
// 设置元素偏移Z轴的位置
transform: translateZ(100px);
}
var i = 0;
setInterval(function (argument) {
i+=2;
document.getElementsByTagName('div')[0].style.perspective = i + 'px';
},50)
我们设置定时器，将景深的距离依次增加，我们发现此元素的越来越小，这不就是正和我们的眼睛一样吗，当距离元素越远时，元素显示的越小。
当然景深不可能为0，如果说在现实生活中为视距为0，那我们就不会看见这个元素。
位置（perspective-origin）
俗话说，千人千面。3d也是一样，我们在不同的位置下观看相同的东西，眼睛反馈回来给我们是不同的样式。
body{
transform-style: preserve-3d;
perspective: 800px;
}
document.body.onmousemove = function (e) {
this.style.perspectiveOrigin = e.pageX + "px " + e.pageY + "px" ;
}
为了更好的演示效果，我们将body设置为3d，将鼠标的位置代表的眼睛的位置，我们移动鼠标可以看见不同状态的3d效果。
动画（animation）
在css3中动画是极其方便的，它甚至不用写JavaScript代码就可以实现运动的过程，而创建动画就是想变换的过程有过渡的效果。
@keyframes run{
form{
width: 100px;
height: 100px;
}
to{
width: 200px;
height: 200px;
}
}
/*百分比形式*/
@keyframes run{
0%{
width: 100px;
height: 100px;
}
50%{
width: 150px;
height: 150px;
}
100%{
width: 200px;
height: 200px;
}
}
创建一个名为run的动画，且从form的状态开始，到to的状态结束。如果说还有其他的过程我们也可以写成百分比的形式。
div:hover{
animation: run 3s;
}
当鼠标移入元素上时我们开始运行动画，且在3s中完成这个动画，并且回到原始状态。
设置动画的速度状态（animation-timing-function）
和过渡的是一样的道理，可以翻到开篇的位置进行查看。
设置动画播放的次数（animation-iteration-count）
我们的动画默认播放一次，也就是默认值为1，当我们我们也可以让他重复播放。
div:hover{
animation: run 3s ease infinite;
}
@keyframes run{
form{
left: calc(50% - 50px);
top: calc(50% - 50px);
}
to{
left: calc(50% + 50px);
top: calc(50% + 50px);
}
}
设置动画的周期是否交替反向播放（animation-direction）
动画执行时我们可以设置动画的播放方向，当然动画被设置只播放一次将无法起作用。
div:hover{
animation: run 3s ease infinite;
// 设置动画奇数正向播放，偶数反向播放。
animation-direction: alternate;
}
@keyframes run{
form{
left: calc(50% - 50px);
top: calc(50% - 50px);
}
to{
left: calc(50% + 50px);
top: calc(50% + 50px);
}
}
以上设置animation-direction: alternate 奇数正向播放，偶数反向播放，当然还有animation-direction: alternate-reverse 奇数反向播放，奇数正向播放；animation-direction: reverse 动画反向播放。
小案例（3D相册）
关于css3过渡，转换和动画就差不多了，既然你都看到这里来了，不妨再完成一个动画的小案例吧。
开启3d模式
我们设置body开启3d模式，给一个容器居中，并且也开启3d模式。
<div class="contain"></div>
*{
margin: 0;
padding: 0;
}
:root,body{
height: 100%;
}
body{
perspective: 800px;
perspective-origin:50%;
transform-style: preserve-3d;
}
.contain{
width: 200px;
height: 200px;
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
/*设置3d*/
transform-style: preserve-3d;
}
创建上下左右前后的容器
<div class="contain">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
.contain>div{
width: 200px;
height: 200px;
border: 1px solid;
position: absolute;
}
设置前后两个面的位置
.contain>div:nth-of-type(1){
background: url(images/1.jpeg) no-repeat;
background-size: cover;
transform: translateZ(-100px);
}
.contain>div:nth-of-type(6){
background: url(images/6.jpeg) no-repeat;
background-size: cover;
transform: translateZ(100px);
}
设置左右两个面的位置
.contain>div:nth-of-type(4){
background: url(images/4.jpeg) no-repeat;
background-size: cover;
transform: rotateY(90deg);
margin-left: 100px;
}
.contain>div:nth-of-type(5){
background: url(images/5.jpeg) no-repeat;
background-size: cover;
transform: rotateY(90deg);
margin-left: -100px;
}
设置上下两个面的位置
.contain>div:nth-of-type(4){
background: url(images/2.jpeg) no-repeat;
background-size: cover;
transform: rotateX(90deg);
margin-top: 100px;
}
.contain>div:nth-of-type(3){
background: url(images/3.jpeg) no-repeat;
background-size: cover;
transform: rotateX(90deg);
margin-top: -100px;
}
设置动画
.contain{
animation: run 20s linear infinite;
}
@keyframes run{
from{
transform: rotateY(0deg) rotateX(0deg);
}
50%{
transform: rotateY(180deg) rotateX(180deg);
}
to{
transform: rotateY(360deg) rotateX(360deg);
}
}
