transform
transform 为css属性,主要用于元素的变形处理
属性:translate,rotate scale skew
分别为 平移 旋转 缩放 斜切
translate:指定对象的2D translation(2D平移)。第一个参数为对应的X轴,第二个参数为对应的Y轴。如果第二个参数未提供,则默认为0.
例如: transform:translate(10px,10px)
X 轴 正值 向右 Y轴 正值向下
rotate:指定对象的2D旋转,需现有transform-origin属性的定义。
例如:rotate(90deg),transform-origin:0 0;
不设置transform-origin则默认为旋转点为中心。 顺时针旋转
scale: 指定对象的2D缩放,第一个参数对应X轴,第二个参数对应Y轴,如果第二个参数未提供,默认取第一个参数的值。
例如:scale(0.5,0.5) 参数为为相对对象的尺寸倍数,假如买有设置transform-origin,默认缩放中心为对象中心,设置之后图像朝着中心点缩放。
skew:指定对象的斜切扭曲。第一个参数对应X轴角度,第二个参数对应Y轴角度。
假如第二个参数为提供,默认为0.
例如:skew(50deg,20deg)
transition
transition 为css3属性,主要用于元素的过度动画处理
属性:property, duration,timing-function,delay
property:检索或设置对象中的参与过度的属性。
duration:动过过度的持续时间长度
timing-function:检索或设置对象中过度的动画类型。(linear线性,ease缓慢,ease-in慢速度进入,ease-out慢速度结束,ease-in-out慢速度进入最后再慢速度结束)
delay:检索或者设置对象延迟过度的时间。
网友评论