CSS中的transform的简单使用

transform

1.旋转:transform: rotate(45deg)

以角度(deg)为单位,正数是顺时针旋转,负数是逆时针旋转 。

2.缩放:transform: scale(0.5) 或者 transform: scale(0.5,0.4)

一个参数:表示水平跟垂直方向同时缩放0.5,等同于scaleX(0.5)
两个参数:第一个参数表示水平方向的缩放比例,第二个参数表示垂直方向的缩放比例
scaleY(0.3):表示垂直方向的缩放比例
scaleZ(0.3):表示Z轴方向缩放比例
scale3d(0.5,0.3,0.4):表示3D三个方向缩放的比例,顺序为X,Y,Z

3.倾斜:transform:skew(30deg) 或者 transform:skew(30deg,30deg)

一个参数:表示水平方向的倾斜角度,等同于skewX(30deg)
两个参数:第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度
skewY:表示垂直方向的倾斜角度

4.移动:transform:translate(500px) 或者 transform:translate(500px,200px)

一个参数:表示水平方向移动的位移,等同于translateX(500px)
两个参数:第一个参数表示水平方向移动的位移,第二个参数表示垂直方向移动的位移
translateY(200px):表示垂直方向移动的位移
translateZ(10px):表示Z轴方向移动的位移
translate3d(10px,20px,10px):表示3D三个方向移动的位移,顺序为X,Y,Z

5.元素的基点:transform-origin: 10px 20px

在对文字或者图片进行变形时,默认是以元素的中心为基点进行的,使用transform-origin属性,可以改变元素的基点。
有两个参数:第一个表示距离元素左上角水平方向的距离,第二个表示距离元素左上角垂直方向的距离。当然,第一个参数可以设置为left、center、right,第二个参数可以设置为top、center、bottom。

6.组合使用

一般格式: transform:rotate(45deg) scale(0.3) skew(30deg,30deg) translate(100px 100px)
顺序依次为:rotete、scale、skew、translate

  • 4
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值