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;
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄
更多精彩
