2D转换
1.translate()
移动元素:
transform:translate(50px,100px)
translateX(n)
translateY(n)
2.rotate()
顺时针旋转元素,负值则为逆时针:
transform: rotate(30deg);
3.scale()
元素尺寸增大或减少:
transform: scale(2,4);
x两倍,y四倍
scaleX(n)
scaley(n)
4.skew()
元素倾斜翻转:
transform: skew(30deg,20deg);
x轴30度,y轴20度。
skewX(angle)
skewy(angle)
5.matrix()
组合,6个参数
transform:matrix(0.8,0.5,-0.5,0.8,0,0);
第一个数字X放大或减小
第二个数字Y倾斜
第三个数字X倾斜
第四个数字Y放大或减小
第五个数字X位置
第六个数字Y位置
3D转换
1.rotate
X,Y,Z定义以围绕X.Y.Z轴进行旋转
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
transform:rotateZ(angle)
2.origin
允许你改变被转换元素的位置
过渡
1.property
定义哪些元素需要过渡,全部可以用all
transition-property:all
2.duration
定义过渡效果需要的时间
transition-duration:2s
3.timing-function
规定过渡效果的时间曲线。默认是 “ease”
linear 规定以相同速度开始至结束的过渡效果
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
4.delay
规定过渡效果何时开始。默认是 0。