CSS知识点总结3

一.转化，转变

transform: rotate | scale | skew | translate;

属性之间用空格隔开   注意：不是逗号“，”

二.移动

1、translate(<translation-value>[, <translation-value>])

2、translateX(<translation-value>)                  

3、translateY(<translation-value>)

二.旋转

rotate(<angle>)

Transform:rotate(45deg);

Transform:rotateX(45deg);

Transform:rotateY(45deg);

Transform:rotateZ(45deg);

Perspective:500;设置元素被查看位置的视图

三.缩放

1、scale(<number>[, <number>])

2、scaleX(<number>)                                  

3、scaleY(<number>)

四.扭曲

1、skew(<angle> [, <angle>])

2、skewX(<angle>)                                     

3、skewY(<angle>)

五.改变元素基点

transform-origin:X Y

1.  transform-origin:left top:

2. transform-origin:right

3.  transform-origin:25% 75%;

六.变化时间

transition: all 5s ease 0s;

1.transition-property:

        transition-property ： none | all | [ <IDENT> ]

2.transition-duration:

        transition-duration ： <time> [, <time>]*

<time>为数值，单位为s（秒）或者ms(毫秒), 

七.变化速度过程

1.ease:（逐渐变慢）

2.linear：（匀速）

3.eae-in：（加速）

4.ease-out：（减速）

5.ease-in-out：（加速然后减速）

6.cubic-bezier（x1,y1,x2,y2）