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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值