Css3转换
一、概括
1、通过css3转换可以实现对元素的移动、缩放、转动、拉伸或拉长的操作。
2、转换的定义：改变位置、形状、尺寸。分两种2D转换和3D转换（空间转换）
3、浏览器支持：IE、火狐、欧朋（仅支持2D转换）、谷歌和Safari要加内核前缀-webkit-。
二、transform
1、Transform属性：（2D转换，3D转换）
1-1、2D转换：只能在x轴y轴上进行操作；
常见值：
none（默认值，不进行转换）
transform-function：（转换函数）
1-2、写法如下
transform：translate（x px，y px）平移，
transform：rotate（angel deg）旋转，angel值可正（顺时针）可负（逆时针）
transform：scale（n，n）改变元素的尺寸，根据x轴和y轴的值即宽或高来改变元素放大或缩小(0~1表示缩小)的倍数
transform：skew（x deg，y deg）翻转倾斜，围绕x轴翻转x度，围绕y轴翻转y度
transform：matrix（）把所有的2D转换的方法组合在一起。
Transform-origin（）允许你改变转换元素的位置,默认情况下转换原点是在元素的中心点或者是x轴和y轴的50%处， 值有三种形式：数值/百分比/关键字；
2、3D转换：transform-style()
值：①flat（默认值）表示所有子元素在2D平面呈现。
②perserve-3D表示所有的子元素在3D空间中呈现
perspective属性（中文意思是：透视，视角）单位以像素计；
语法：perspective: number|none;其中（none为默认值）
perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示，镜头距离元素表面的位置是300像素。
三、过渡
1、什么是过度transition？
添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。
1、能够在一定的时间内使css属性平滑的变化
2、需要触发
2、常用的属性：
| 属性 | 描述 | CSS |
|
| 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| 规定应用过渡的 CSS 属性的名称。 | 3 | |
| 定义过渡效果花费的时间。默认是 0。 | 3 | |
|
| 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
|
| 规定过渡效果何时开始。默认是 0。 | 3 |
1、主要包含：transition-property：none、all、intent
2、transition-duration 定义过渡花费的时间，默认是0
3、transition-timing-function 规定过度效果的时间曲线，默认是“ease”先慢后快 其他值：linear匀速、
ease-in以慢速开始、ease-out以慢速结束、ease-in-out以慢速开始和结束。
4、transition-delay：设置出发后何时开始执行
5、缩写：transition：: property duration timing-function delay;
多个样式加过渡效果
| 值 | 描述 |
| linear | 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 |
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 |
| ease-in | 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 |
| ease-out | 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out | 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
四、动画
关键帧：@keyframes
animation与transition的区别：相同点都可以改变css属性；不同点动画不用触发。
动画常用属性：
| 属性 | 描述 |
| 规定动画。 | |
| 所有动画属性的简写属性，除了 animation-play-state 属性。 | |
| 规定 @keyframes 动画的名称。 | |
| 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | |
| 规定动画的速度曲线。默认是 "ease"。 | |
| 规定动画何时开始。默认是 0。 | |
| 规定动画被播放的次数。默认是 1。 | |
| 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | |
| 规定动画是否正在运行或暂停。默认是 "running"。 | |
| 规定对象动画时间之外的状态。 |