1.transform2d名称描述transform变换函数transform-orign指定变换起点1.1transform属性值名称描述参数translate/translateX/translateY平移长度值或百分比scale/scaleX/scaleY缩放数值rotate旋转角度skew倾斜角度矩阵示例：transform:翻译X(100px);转换：translateX(50%)；变换：比例（2）；变换：比例（0.5）；变换：旋转（45度）；clockwisetransform:skew(45deg,45deg);//水平方向（0-90有意义）垂直方向（0-90有意义）附倾斜信息：CSS3变换矩阵matrix和拉伸示例页面多重效果并行：只是效果，没有过程，没有线：transform:scale(0.5)rotate(45deg);1.2transform-orign默认为中心点。可以设置其他值。第一个参数是x轴，它的值可以是左、中、右或百分比。第二个参数是y轴，它的值可以是top、center、bottom或者一个百分比。示例：变换原点：00；变换原点：左上；变换原点：50%50%；2.transform3dnamedescriptiontransform-style显示样式(flat/perserve3d)perspective指定变换的起点2.1transform3d多了一个z轴。transfrom的属性值大于2d：名称描述参数translate3d(x,y,z)/translateZ(z)平移长度值或百分比scale3d(x,y,z)/scaleZ(z)缩放值rotateX(x)/rotate(y)/rotateZ(z)旋转角度matrix3dmatrix略2.2transform-style指定嵌套元素在3d空间中的呈现方式。名称说明flat2dscreenpreserve-3d3dscreen2.3透视是指眼睛与3d元素之间的距离。名称描述none默认值，表示从无限角度观看3D对象，但它看起来是平面的。长度值接受长度单位大于0的值，其单位不能为百分比。值越大，角度显得越远，就像你看远处的物体一样。值越小，则相反。2.4perspective-origin变体基点，同transform-origin例子：p{width:200px;高度：200px；背景色：灰色；}p.b{变换：translate3d(100px,100px,-200px);}div{透视：1000px;转换样式：preserve-3d;

3.transition过渡效果一般是通过一些简单的CSS动作来触发平滑过渡功能，比如：:hover,:focus,:active,:checked等。CSS3提供了transition属性来实现这种过渡功能。主要属性如下：名称描述参数transition-property指定CSS属性none，all，指定属性transition-duration1s，2s所需要的时间transition-timing-functionprocessfunctionease,linear,ease-in,ease-out,ease-in-outtransition-delaydelay1s,2stransition以上四个缩写没有过渡效果例子：div{width:200px;高度：200px；背景颜色：栗色；颜色：灰色；}div:hover{背景颜色：绿色；color:white;加上过渡效果：div{width:200px;高度：200px；背景颜色：栗色；颜色：灰色；过渡属性：全部；过渡持续时间：2s；transition-timing-function:ease;}缩写形式：transition:all2sease;名称描述线性元素样式从初始状态到最终状态的过渡速度是一个恒定的速度。等于贝塞尔曲线默认值(0.0,0.0,1.0,1.0)ease，当元素样式从初始状态过渡到最终状态时，速度由快变慢，逐渐变慢。相当于贝塞尔曲线（0.25,0.1,0.25,1.0）当ease-in元素样式从初始状态过渡到最终状态时，速度越来越快，呈现加速状态。相当于贝塞尔曲线(0.42,0,1.0,1.0)当ease-out元素样式从初始状态过渡到最终状态时，速度越来越慢，呈现减速状态。相当于贝塞尔曲线(0,0,0.58,1.0)线性元素样式以恒定速度从初始状态过渡到最终状态。相当于贝塞尔曲线(0.0,0.0,1.0,1.0)当ease-in-out元素样式从初始状态过渡到最终状态时，先加速后减速。相当于贝塞尔曲线(0.42,0,0.58,1.0)4.animationCSS3提供了类似于Flash关键帧控件的动画效果，通过animation属性实现。那么之前的transition属性只能通过指定属性的初始状态和结束状态来实现动画效果，具有一定的局限性。animation动画效果主要由两部分组成：1.类似于Flash动画，通过关键帧声明一个动画；2.调用animation属性中关键帧声明的动画。名称说明animation-name用于指定关键帧动画的名称，必须对应@keyframes规则。加载CSS时应用动画名称指定的动画，从而执行动画。animation-duration用于设置动画播放所需的时间animation-timing-function用于设置动画的播放方式animation-delay用于指定动画的延迟时间animation-iteration-count用于指定次数ofloopsforanimationplaybackanimation-direction用于指定动画的播放方向。animation-play-state用于控制动画的播放状态。animation-fill-mode用于设置动画的超时属性。动画上面的速记代码：@keyframesanim{0%,100%{background-color:maroon;颜色：灰色；}50%{背景颜色：黑色；白颜色;}}div{宽度：200px；高度：200px；背景颜色：栗色；颜色：灰色；}div：悬停{动画名称：动画；animation-duration:5s;或者：@keyframesanim{from{background-color:maroon;颜色：灰色；}到{背景颜色：黑色；白颜色;}}简写：animation:anim5sease;