首页 > 其他 > 详细

transform 变形与注意事项

时间:2021-01-03 18:58:28      阅读:24      评论:0      收藏:0      [点我收藏+]

translate:位移(值是像素)

  tranform:translateX()

  两个值宽高,不设置的话写0

scale:缩放

  (值是一个比例值,正常大小就是1)

  也分为X、Y、Z

  两个值、宽高

  一个值宽高

rotate:旋转(值是角度 deg )

  也分为X、Y、Z(X和Y是3d)

  Z和rotate是等级关系,正值按顺时针旋转,负值按逆时针旋转

skew:斜切(单位也是角度)

  分为X、Y(不存在3d效果)

  正值向左倾斜,负值向右倾斜

注意事项:

  1、变形操作不会影响到其他元素

  2、变形操作只能添加给块元素,不能添加给内联元素(无效果)

  3、复合写法,可以同时添加多个变形操作(通过空格的方式添加第二个变形)

    执行有顺序,先执行后面的操作,再执行前面的操作

    translate 会受到 rotate、scale、skew 的影响

基点的位置:

  旋转默认会以中心点进行旋转,可以加一个基点位置

  transform-origin:值用数值也可以用单词也可以

  超出容器范围也可以

 

transform 变形与注意事项

原文:https://www.cnblogs.com/moodblog/p/14226416.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!