开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第十四天，点击查看活动详情
💕 前言：今日继续CSS 3的新特性学习，掌握2D转换~
7. 2D转换
7.1 移动 translate
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
语法：
transform: translate(x,y);或者分开写
transform: translateX(n);
transform: translateY(n);
重点：
- 定义2D转换中的移动，沿着X和Y轴移动元素
- translate最大的优点︰不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素的translate:(50%,50%);
- 对行内标签没有效果
7.2 旋转 rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
语法：
transform:rotate(度数)
重点：
- rotate里面跟度数，单位是deg 比如rotate(45deg)
- 角度为正时，顺时针，负时，为逆时针
- 默认旋转的中心点是元素的中心点
7.3 中心点 transform-origin
设置元素旋转的中心点
语法：
transform-origin: x y;
重点:
- 注意后面的参数x和y用空格隔开
- x y 默认转换的中心点是元素的中心点(50% 50%)
- 还可以给x y设置 像素 或者 方位名词 ( top bottom left right center )
7.4 缩放 scale
缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。
语法：
transform: scale(x,y);/* x,y表示倍数不跟单位 */
/*宽高等比例缩放*/
transform: scale(n);
重点：
- 缩放不影响其他盒子；
- 可以设置缩放中心点
7.5 综合写法
注意∶
- 同时使用多个转换，其格式为: transform:translate() rotate() scale() ...等，
- 其顺序会影转换的效果。(先旋转会改变坐标轴方向)
- 当我们同时有位移和其他属性的时候，记得要将位移放到最前
