css3动画

1）transition:要过渡的属性，花费时间，运动曲线，何时开始。(且是一直存在的)

过渡:让你可以观测到状态a到状态b的过程;多组过渡效果,请用逗号隔开。

如果所有过渡效果都是同时发生,那么请使用all；

eg.transition: all 3s;

2）transform: translate(x,y);变形属性(X轴和Y轴方向上的平移)

/*定位盒子的居中方式*/

      left: 50%;

top: 50%;

transform: translate(-50%,-50%);

3）缩放：transform:scale(x,y);

注：括号内的是缩放比例；若是大于1则为放大，小于1则是缩小比例

4）旋转：transform: rotate(100deg);相当于Z轴的旋转

注：旋转属性:旋转的角度:正值:顺时针方式*/

 旋转的中心点属性:transform-origin

  transform-origin: -50px -50px; /*旋转的中心点在图片左上角偏外一点位置。*/

注意：哪个身上有动画效果，过渡的时间（transition: all 3s；）就加给谁。

5）X轴旋转：transform: rotateX(360deg);单凭这个是没有3d效果的，需要给旋转元素的父

级添加视距(perspective:透视距离)。

eg.       div {

width: 300px;

margin: 300px auto;

perspective: 1000px;

/*模拟肉眼距离元素500px~1000px*/

/*近大远小（属性值大小来区分）*/

}

img {

transition: all 2s;

}

div:hover img {

transform: rotateX(360deg);

/*为什么没有3d效果*/

/*必须要给旋转的元素的父元素添加视距*/

}

<div>

<img src="imgs/x.jpg">

</div>

6）Y轴旋转：transform: rotateY(360deg); 和X轴一样需要视距才能看出有3d效果。

默认情况下沿着中间的线为旋转轴，使用transform-origin属性可实现沿左边或右边线为旋转

轴旋转。

   eg.transform-origin: right center;