transform属性

缩放:scale

作用:
使元素在位置或者形状上发生一定的改变。
属性:
transform
属性值:
scale:缩放(一般)
translate 位移(重点)
rotate 旋转(重点)
skew 倾斜(了解)

scale 缩放
  格式:  transform:scale(x,y)
    x:表示水平方向上的缩放倍数
    y:表示垂直方向上的缩放倍数
    
    
  如果只写一个值表示等比例缩放。

 【注意】 
  1.缩放只是一种视觉效果,不会对别的盒子造成影响。
  2.取值大于1表示放大,小于1表示缩小。

位移:translate

格式:
transform:translate(水平位移量,垂直位移量)

  取值:水平位移量为正,向右移动,垂直方向的正方形为下。

  只写一个值,表示水平位移量。

  参数为百分比的话,是相对于自身的宽高。

  位移只是一种视觉效果,不会对别的盒子造成影响。

旋转:rotate

格式:transform:rotate(角度(deg))
单位:deg,正值:顺时针,负值:逆时针。

转换原点:
transform-origin:水平坐标,垂直坐标。

  取值:
    px

  单词
      center left top right bottom

倾斜:skew

格式:
transform:skew(水平倾斜角度,垂直倾斜角度)
单位:deg 正值:顺指针 负值:逆时针
两个角度相交,不要大于等于90deg.

【注意点】
  1.转换操作不会影响到其他元素
  2.只能添加给块元素,不能添加给行内元素。
  3.同时添加多个变形操作,先执行前面的,再执行后面的。
  4.多个变形操作必须写在一个transform属性后面,书写多次transform属性       时,后面的会层叠掉前面的。
  • 9
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值