CSS3新增属性（2）

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() ...\等用空格隔开；
• 顺序不同转换效果不同（先旋转会改变坐标轴方向）
• 当我们同时有位移和其他属性的时候，记得要将唯一放到最前

 

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