2015年12月14日
Last updated
Last updated
旋转rotato
语法:rotato(<angle>)
,通过指定的角度参数对原元素指定一个2D rotation(2D 旋转),需先有transform-origin属性的定义。transform-origin定义的是旋转的基点,其中angle是指旋转角度,如果设置的值为正数表示顺时针旋转,如果设置的值为负数。
移动translate
语法:translate(<translation-value>[, <translation-value>])
。
移动translate我们分为三种情况:translate(x,y)
水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);translateX(x)
仅水平方向移动(X轴移动);translateY(Y)
仅垂直方向移动(Y轴移动。
缩放scale
语法:scale(<number>[, <number>])
,如果第二个参数未提供,则取与第一个参数一样的值。scale(X,Y)
是用于对元素进行缩放,可以通过transform-origin
对元素的基点进行设置,默认是中心位置。
如:transform:scale(2,1.5):
如transform:scaleX(2):
如transform:scaleY(2):
扭曲skew
语法:skew(<angle> [, <angle>])
,第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则值为0,也就是Y轴方向上无斜切。同样是以元素中心为基点,我们也可以通过transform-origin
来改变元素的基点位置。
如:transform:skew(30deg,10deg):
如 transform:skewX(30deg):
如:transform:skewY(10deg):
元素基点transform-origin
transform-origin(X,Y)
:用来设置元素的运动的基点(参照点)。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px,其中X也可以是字符参数值left,center,right;
1、top left | left top 等价于 0 0 | 0% 0% 2、top | top center | center top 等价于 50% 0 3、right top | top right 等价于 100% 0 4、left | left center | center left 等价于 0 50% | 0% 50% 5、center | center center 等价于 50% 50%(默认值) 6、right | right center | center right 等价于 100% 50% 7、bottom left | left bottom 等价于 0 100% | 0% 100% 8、bottom | bottom center | center bottom 等价于 50% 100% 9、bottom right | right bottom 等价于 100% 100%