transform的使用:

transform属性 可以使元素进行缩放、平移、旋转等2D、3D的变换

语法:

transform: none/transform-function;

参数:

translate(x,y)     定义2D转换,表示在x轴和y轴上进行平移

translate3d(x,y,z)      定义3D转换

translateX(x)    表示在x轴上进行平移

translateY(y)     表示在y轴上进行平移

translateZ(z)     表示在z轴上进行平移

rotate(deg)      表示旋转一定角度,正时针旋转角度为正直,逆时针旋转角度为负值

rotate3d(x,y,z,deg)      3D转换

rotateX(angle)     3D转换,表示绕x轴旋转多少度

rotateY(angle)      3D转换,表示绕y轴旋转多少度

rotateZ(abgle)       3D转换,表示绕Z轴旋转多少度

scale(x-angle,y-angle)      2D转换,表示缩放,在x轴和y轴上扩大多少倍。x值和y值 表示倍数,若值小于1 表示缩小

scaleX(angle)     表示在x轴上扩大多少倍

scaleY(angle)     表示在y轴上扩大多少倍

skew(x-angle,y-angle)      表示在x轴和y轴上分别倾斜的度数

skewX(x)      2D转换,表示在x轴上倾斜的度数

skewY(y)      2D转换,表示在y轴上倾斜的度数

matrix(n,n,n,n,n,n)     定义2D转换,表示使用6个值得矩阵进行变换

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,)    定义3D转换,表示使用16个值的4x4转换

none                   表示不进行转换

接下来有个transform-origin:

用来设置被改变元素的中心位置,经常用于旋转中,要设置旋转中心。其值是具体的度数数值,值可以为正值或负值,为正值表示正向旋转,为负值表示逆向旋转。2D和3D都可使用

语法:

transform-origin:x y z;

x            定义视图被置于x轴何处,

             可能的值:left/center/right/length/%

y            定义视图被置于Y轴的何处 

              可能的值:top/center/bottom/length/%

z             定义视图被置于z轴何处

               可能的值: length

猜你喜欢

转载自blog.csdn.net/qq_29704567/article/details/89192944