css3知识点（2）

一.2D转换

1 translate()元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数（xxpx,xxpx）

（2）rotate() 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。( xxdeg)

3）scale()元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数(n,n)

4）skew() 元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数(xxdeg,xxdeg)

二.3D转换

Transform

  Translate3d(x,y,z)---- 沿着x,y,z轴移动

  Rotate3d(x,y,z,deg)----旋转

perspective(n)定义3D转换元素的透视视图，但目前所有浏览器都无法兼容。

三.动画

@keyframes xxx { };

Animation:xxx 2s;

 Opacity 规定透明度。从 0.0 （完全透明）到 1.0（完全不透明）

IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。

Box-sizing 规定盒模型

属性值：content-box | padding-box | border-box。

四.过渡

transition

transition简写属性，用于在一个属性中设置四个过渡属性。

transition-property 规定应用过渡的css属性的名称。

transition-duration 定义过渡效果花费的时间，默认为0.

transition-timing-function 规定过渡效果的时间曲线，默认为"ease”。

transition-delay 规定过渡效果核实开始。默认为0.