transition-property :规定设置过渡效果的CSS属性的名称。
transition-duration :规定完成过渡效果需要多少秒或毫秒。
transition-delay :定义过渡效果何时开始。(延迟(数值为正数),也可以提前(数值为负数))
transition-timing-function :规定速度效果的速度曲线。
transition-timing-function:
linear
ease(默认值)
ease-in
ease-out
ease-in-out
cubic-bezier
(http://cubic-bezier.com)
注:不要加在hover上
transform变形
translete:位移
translateX
translateY
translateZ (3D)
scale:缩放 (值是一个比例值,正常大小就是1, 会以当前元素中心点进行缩放)
scaleX
scaleY
scaleZ (3D)
rotate:旋转 (旋转的值,单位是角度 deg, 弧度 rad)
rotateX (3D)
rotateY (3D)
rotateZ (和rotate是等级关系,那正值按顺时针旋转,复制按逆时针旋转)
skew:斜切 (单位也是角度,正值向左倾斜,负值向右倾斜)
skewX
skewY
transform的注意事项:
1.变形操作不会影响到其他元素
2.变形操作只能添加给块元素,但是不能添加给内联元素
3.复合写法,可以同时添加多个变形操作
执行是有顺序的,先执行后面的操作,在执行前面的操作
translate会受到rotate、scale、skew的影响
4.transform-origin:基点位置
x y z(3D)