transform
属性 | 作用 |
---|---|
旋转rotate | transform:rotate(45deg)顺时针旋转45°;负值为逆时针。不改变元素形状 |
变形skew | transform:skew() 将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。改变元素形状 |
缩放scale | ①transform:scale(X,Y)使元素水平方向和垂直方向同时缩放; ②transform:scaleX(x)元素仅水平方向缩放; ③transform:scaleY(y)元素仅垂直方向缩放 |
位移 translate | ①transform:translate(x,y)水平方向和垂直方向同时移动; ②transform:translateX(x)仅水平方向移动; ③transform:translateY(Y)仅垂直方向移动 x为正时右移,y为正时下移 |
矩阵 matrix | matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵 如果没有缩放,只是平移,则abcd为1,0,0,1,平移的x值对应e,y值对应f。 如果有缩放,x轴的缩放比例对应为a,y轴的缩放比例对应为d。 |
原点 transform-origin |
重置原点位置,再进行旋转之类的操作。 |
transition-property用来指定过渡动画的CSS属性名称,而这个过渡属性只有具备一个中点值的属性(需要产生动画的属性)才能具备过渡效果,其对应具有过渡的CSS属性主要有:
undefinedtransition
属性 | 作用 |
---|---|
过渡属性transition-property | 指定对HTML元素的哪个css属性进行平滑渐变处理,该属性可以指定。例如background-color,width,height等各种标准的CSS属性。 当“transition-property”属性设置为all时,表示的是所有中点值的属性。 |
transition-duration | 指定完成过渡所需的时间 |
transition-timing-function | 指定过渡函数,主要时过程中速度的变化 |
transition-delay | 指定开始出现的延迟时间 |
transition-timing-function的取值
值 | 描述 |
---|---|
linear | 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1)) |
ease | 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1)) |
ease-in | 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1)) |
ease-out | 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1)) |
ease-in-out | 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1)) |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
网友评论