本文主要是介绍CSS3（二）---2D转换（transform）：移动(translate)、旋转(rotate)、缩放(scale)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1. 2D转换
二维坐标系（改变标签在二维平面上的位置和形状的一种技术）
转换（transform） 是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。
- 移动 ：
translate - 旋转 ：
rotate - 缩放：
scale
移动盒子的位置：①定位 ②盒子的外边距 ③2d转换移动
2.移动
2.1 语法
transform：translate(x,y);x就是x轴上移动位置，y就是y轴上移动位置，x和y逗号分隔 (如果只移动)transform:translateX(n);//只移动X方向上的位置 等同于transform：translate(x,0);transform:translateY(n);//只移动y方向上的位置 等同于 transform：translate(0,y);
x,y单位：- 像素（100px）：往左边、或者下边移动100个像素、
- 百分比（50%）: 移动的距离是盒子宽度的一半
2.2 重点知识点
2D的移动主要是指 水平、垂直方向上的移动translate最大的优点就是不影响其他元素的位置（定位和盒子的外边距使盒子移动会影响其他元素的位置）translate中的100%单位，是相对于本身的宽度和高度来进行计算translate对于行内标签没有效果
2.3 定位显示居中
transform : translate(-50%,-50%);
3. 旋转 --rotate
2D旋转指的是让元素在二维平面内顺时针旋转或者逆时针旋转
3.1 语法
transform :rotate(度数)
单位： deg (不可省略), transform:rotate(45deg);
3.2 重点知识点
rotate里面跟度数，单位是deg- 角度为正时，顺时针，角度为负时，逆时针
- 默认旋转的中心点是元素的中心点
3.3 设置元素转换的中心点
语法：transform-origin: x y;
① 注意后面的参数 x 和 y 用空格隔开
②x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center
③还可以给 x y 设置像素或者方位名词(top、bottom、left、right、center)
④可以是px像素
4. 缩放 --scale
可以让元素进行放大和缩小。
4.1 缩放语法
语法：transform.scale (x ,y );
4.2 知识要点
注意，x 与 y 之间使用逗号进行分隔
里面写的是数字，不跟单位。就是倍数的意思。
transform: scale(1, 1): 宽高都放大一倍，相当于没有放大transform: scale(2, 2): 宽和高都放大了二倍transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致：等比例缩放transform:scale(0.5, 0.5): 缩小scale最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子;可以设置中心点transform-origin: x y;
5. 转换综合
知识要点：
1.同时使用多个转换，其格式为 transform: translate() rotate() scale()... 等
2.顺序会影响到转换的效果(先旋转会改变坐标轴方向)
3.但我们同时有位置或者其他属性的时候，要将位移放到最前面
这篇关于CSS3（二）---2D转换（transform）：移动(translate)、旋转(rotate)、缩放(scale)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
