一、变形
transform：能够对元素对象进行旋转rotate、缩放scale、移动translate、倾斜skew、矩阵变形matrix。
演示样例：
transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg);
/*矩阵变形*/
matrix(<number>,<number>,<number>,<number>,<number>,<number>);
/*透视*/
perspective(length);transition：过度属性
transition：过度效果的css属性名 过度效果时长 速度效果的速度曲线 过度效果開始时间；
transition: property duration timing-function delay;
/*演示样例*/
transition:1s ease all;
-webkit-tansition:1s ease all;
-moz-transition:1s ease all;
-o-transition:1s ease all;rotate()：二维空间旋转元素。
若元素设置了perspective值，可用rotate3d()实现三维空间内旋转。
rotateX(angele)/*相当于rotate3d(1,0,0,angle)指定在三维空间内的X轴旋转*/
rotateY(angele)/*相当于rotate3d(0,1,0,angle)指定在三维空间内的Y轴旋转*/
rotateZ(angele)/*相当于rotate3d(0,0,1,angle)指定在三维空间内的Z轴旋转*/scale()
scaleX(<number>)/*仅仅在X轴（水平方向）缩放元素*/
scaleY(<number>)/*仅仅在Y轴（垂直方向）缩放*/
scaleZ(<number>)/*仅仅在Z轴缩放，前提：元素设定透视值*/translate([,])：移动,是位移量。
translateX(<translation-value>);/*仅仅在X轴（水平方向）移动*/
translateY(<translation-value>);/*仅仅在Y轴（垂直方向）移动*/
translateZ(<translation-value>);/*仅仅在Z轴移动。前提：元素设置透视值*/skew()：倾斜
skewX(<angle>);/*仅仅在X轴（水平）倾斜*/
skewY(<angle>);/*仅仅在Y轴（垂直）倾斜*/matrix(a,c,e,b,d,f)：矩阵变形，c、e的值用正弦或余弦值表示。
a：表示scaleX(); X轴缩放
c：skewY(); Y轴倾斜
e：skewX(); X轴倾斜
b：scaleY(); Y轴缩放
d：translateX() X轴移动
f：translateY() Y轴移动
transform:matrix(<number>,<number>,<number>,<number>,<number>,<number>);perspective()：透视
.wrap{
perspective:1000px;
}
.wrap .child{
transform:perspective(1000px);
}二、过渡
transition-property：过度的属性
transition-property:all;/*针对全部元素都有过度效果*/
transition-property:none;/*没有元素有过度效果*/
transition-property:ident;/*指定css属性有过度效果。比如width*/transition-duration：过度时间
transition-delay：延迟时间。为负数时，过度动作会从该时间点開始显示。之前的动作会被截断。
transition-timing-function：过度效果，默认ease。
transition-timing-function:ease;/*缓解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，既立方贝塞尔*/
transition-timing-function:linear;/*线性效果，等同于cubic-bezier(0.0,0.0,1.0,1.0)函数*/
transition-timing-function:ease-in;/*渐显效果。等同于cubic-bezier(0.42,0,1.0,1.0)函数*/
transition-timing-function:ease-out;/*渐隐效果。等同于cubic-bezier(0,0,0.58,1.0)函数*/
transition-timing-function:ease-in-out;/*渐显渐隐效果，等同于cubic-bezier(0.42,0,0.58,1.0)函数*/
transition-timing-function:cubic-bezier;/*特殊的立方贝塞尔曲线效果*/三、动画
animation-name：动画名称。必须与规则@keyframes配合使用。由于动画名称由@keyframes定义，假设提供多个属性值用逗号隔开。
@keyframes相当于一个命名空间。后面跟一个名词，假设在class中的animation-name定义了与之相应的name就能够运行动画。定义动画时可直接使用关键字from和to，从一种状态过度到还有一种状态。
.animation_name{
left:0;
top:100px;
position: absolute;
-webkit-animation: 0.5s 0.5s ease infinite alternate;
-moz-animation: 0.5s 0.5s ease infinite alternate;
-webkit-animation-name:demo;
-moz-animation-name:demo;
}
@-webkit-keyframes demo{
from{left:0;}
to{left:400px;}
}
@-webkit-keyframes demo1{
0%{left:0;}
50%{left:200px;}
100%{left:400px;}
}animation-duration：动画时间
animation-timing-function：播放方式。取值例如以下：
ease：缓解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，既立方贝塞尔。
linear：线性效果
ease-in：渐显效果
ease-out：渐隐效果
ease-in-out：渐显渐隐效果
step-start：立即跳转到动画结束状态
step-end：保持动画開始状态，到动画运行时间结束。立即跳转到动画结束状态
step([,[start | end]]?)：第一个參数number为指定的间隔数，即把动画分为n步阶段性显示，第二个參数默觉得end，设置最后一步状态，start为结束时的状态，end为開始时的状态，若设置与animation-fill-mode的效果冲突，以animation-fill-mode的设置为动画结束状态。
cubic-bezier(,,,)：特殊的立方赛贝尔曲线效果
animation-delay：開始播放时间
animation-iteration-count：播放次数，取值为infinite时表示无限循环播放
animation-direction：播放方向，取值为：
normal：正常方向
reverse：动画反向运行。方向始终与normal相仿
alternate：动画会循环正反交替运动
animation-fill-mode：播放后的状态，取值：
none：默认值，不设置
forwards：结束后保持动画结束的状态
backwards：结束后返回动画開始时状态
both：结束后可遵循forwards和backwards两个规则
animation-play-state：检索或设置对象动画的状态，取值：
running：默认，运动
paused：暂停
四、关联属性
transform-origin：变形原点，transform的參照点，默觉得元素的中心点。
有两个參数，參数一为横坐标，參数二为纵坐标。
percentage：用百分比指定坐标值。可负
length：用长度指定坐标值，可负
left center right：水平方向取值
top center bottom：垂直方向取值
perspective-prigin：透视原点。定义在X轴和Y轴的3D元素，同意改变3D元素的底部位置，定义该属性时。它是一个元素的子元素，透视图，而不是元素本身。
注意：使用该属性必须和perspective属性一起用，仅仅影响3D转换的元素。
取值：percentage、length、left、center、right、top、center、bottom
backface-visibility：隐藏内容的背面，默认情况下背面可见，反转后变换的内容仍然可见。当backface-visibility设置hidden时，旋转后内容将隐藏，旋转后正面将不再可见。
取值：visible、hidden
transform-style：3D呈现，设置内嵌的元素在3D空间怎样呈现，有两个值：
flat：全部子元素在2D平面呈现
preserve-3d：保留3D空间