CSS3 变形与动画相关属性

css3为变形提供了如下两个属性指

transform: 用于设置形变。

位移变换: 沿着Z轴的位移看不到效果,是因为Z轴垂直于屏幕,只有开启3d 效果才可以.

• translate(tx,ty): 设置HTML元素沿X轴移动tx距离，沿Y轴移动ty距离。其中ty 参数可以省略，省略的话，默认为0，表示沿Y轴没有移动。
• translate3d(tx,ty,tz): tz表示沿Z轴移动tz距离。
• translateX(tx): 沿X轴移动tx距离。
• translateY(ty):同上。
• translateZ(tz): 同上。

缩放变换: scaleZ沿Z轴缩放,由于目前元素基本都是平面的,所以看不到效果

• scale(sx,sy): 设置html元素沿X轴缩放比为sx，沿Y轴方向缩放比为sy，sy参数可以省略，若省略该参数，sy默认等于sx，也就是保持纵横比缩放。
• scale3d(sy,sx,sz): sz表示Z轴方向缩放比为sz。
• scaleY(sy): 该函数相当于执行scale(1,sy);
• scaleX(sx): 同上。
• scaleZ(sz):同上。

旋转变换: rotate函数与rotate Z两个函数其实是一样的.

• rotate(angle): 设置html元素绕Z轴顺势针转过angle角度。
• rotate3d(s,y,z,angle): 设置html元素绕指定轴顺时针旋转angle角度。
• rotateX(angle): 设置html元素绕X轴顺时针旋转angle角度。
• rotateY(angle):同上。
• rotateZ(angle): 同上。

倾斜变换: 倾斜时二维变换,所以没有skewZ.

• skew(sx,sy): 设置html元素沿X轴倾斜sx角度，沿Y轴倾斜sy角度，其中sy参数可以省略，省略默认为0。
• skewX(xAngle): 设置html元素沿着X轴倾斜xAngle角度。
• skewY(yAngle): 同上。

transform-origin: 设置形变的中心点，该属性指可以指定为xCenter yCenter或者xCenter yCenter zCenter,其中zCenter只支持长度值，xCenter yCenter支持如下几种属性值：

• left：旋转中心位于元素的左边界，只能给xCenter。
• top：旋转中心位于元素的上边界，只能给yCenter。
• right：旋转中心位于元素的右边界，只能给xCenter。
• bottom：旋转中心位于元素的下边界，只能给yCenter。
• center：旋转中心位于元素的中间，如果将xCenter,yCenter都指定为center，旋转中心位于元素的中心。
• 长度值：指定旋转中心点距离左边界，右边界的长度。
• 百分比：指定旋转中心位于X轴，Y轴上的百分比位置。

特别注意: 1.如果为元素指定多种形变的函数,变形处理的顺序很重要,即使时3种同样地变换,如果变换的顺序不同,得到的效果也不同.
2.对于同一种变换如果中心点发生了改变,实际得到的效果也是截然不同的.

css新增的3D变换

perspective属性: 近大远小
由于Z轴是垂直屏幕向外的,因此当元素沿着Z轴位移时,如果不考虑3d视觉效果,是看不到任何效果的. 如果想要看到3d的透视效果,就必须要要设置 perspective属性,该属性值是有效的长度值.

transform-style属性: 设置给父元素.
transform-style: 指定是否在3d空间内正确的呈现元素的“遮挡”等嵌套关系.

• flat: 不保留子元素的3d位置.
• preserve: 子元素将保留3d位置

backface-visibility属性: 设置元素转到背面时是否可见.

• visible: 背面时可见的.
• hidden: 背面是不可见的.

css提供的Transition动画

Transition动画 可以控制html元素的某个属性发生改变时经历一些时间,以平滑间变的方式发生改变,这就是动画效果.
transition属性 包括以下属性值:

• transition-property: 指定对元素的那个c s s属性进行平滑的渐变处理,可以是background-color,width,height等各种标准的c s s属性.

• transition-duration: 指定属性平滑渐变的持续时间.

• transition-timing-function: 指定渐变的速度:

   	> ease: 动画开始时较慢,然后速度加快,到达最大速度后再减慢速度.
   	> linear:线性速度.
   	> ease-in: 动画开始时速度慢,然后速度加快.
   	> ease-out: 动画开始时速度很快,然后速度减慢.
   	> ease-in-out:动画开始时较慢,然后速度加快,到达最大速度后再减慢速度.
  

• transition-delay: 指定延迟时间.

css提供的animation动画

css3提供了强大的TWEEN动画支持:animation动画,这种动画允许开发者定义多个关键帧.
animation动画提供了如下几个属性:

• animation-name:指定动画名称.
• animation-duration: 指定动画的持续时间.
• animation-timing-function: 指定动画的变化速度.
• animation-delay: 指定动画延迟多长时间才开始.
• animation-iteration-count: 指定动画循环的次数.
• animation:这是一个符合属性