一.转化,转变
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)