transform的使⽤
⼀、
transform可以使元素进⾏缩放、平移、旋转等2D、3D的变换
参数:
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轴上倾斜的度数
⼆、
transform-origin ⽤来设置被改变元素的中⼼位置,经常⽤于旋转中设置旋转中⼼
transform-origin:x y z
参数:
x 定义视图被置于x轴何处,
可能的值:left/center/right/length/%
y 定义视图被置于Y轴的何处
可能的值:top/center/bottom/length/%
z 定义视图被置于z轴何处
可能的值:length