CSS3有哪些新增的东西呢???(续1)

CSS3 2D转换

一、移动

  • transform : translate(x,y);    向X移动 x距离 和 向Y轴移动 y距离
  • transform : translateX(x);    向X轴移动 x距离
  • transform : translateY(y);    向Y轴移动 y距离
  • tip:
    • translate 不会影响到其他元素的位置
    • translate 中的百分比单位是相对于自身元素的translate:(50%,50%);
    • 对行内标签没有效果

 

二、旋转

  • transform : rotate(度数);
  • tip:
    • rotate里面跟度数,单位是deg 比如;rotate(45deg);
    • 角度为正时,顺时针,为负时,逆时针
    • 默认旋转的中心点是元素的中心点

 

三、转换中心点

  • transform-origin: x y;
  • tip:
    • 参数x 和 y 用空格分开
    • x y默认转换的中心点是元素的中心点(50%,50%)
    • 可以给x y 设置 像素 或 方位名词(top bottom left right)-- transform-origin:left bottom; (左下角)

 

四、缩放

  • transform:scale(x,y);
  • tip:
    • transform:scale(1,1); 宽高放大1倍,相当于没放大
    • transform:scale(2,2); 宽高放大2倍 也可写成 transform:scale(2);
    • transform:scale(0.5,0.5); 宽高缩小
    • scale 缩放:可以设置转换中心点缩放,默认以中心点缩放,而且不影响其他盒子

 

五、2D转换综合写法

  • 同时使用多个转换,格式:transform:translate() rotate() scale() ...\等用空格隔开;
  • 顺序不同转换效果不同(先旋转会改变坐标轴方向)
  • 当我们同时有位移和其他属性的时候,记得要将唯一放到最前

 

博客只用于记录自己学习的东西,如有错误感谢留言斧正哦!

 

posted @ 2019-11-19 23:58  哈喽小伙  阅读(...)  评论(... 编辑 收藏