CSS3 2D转换

2D 转换 transform

改变元素在二维平面上的位置和形状

特性：

• 只作用于块元素，行内元素无效
• 改变后占据的还是原本的位置，不影响其他元素的

---

1. 移动 translate

可以改变元素在页面中的位置，类似定位

语法：

• 水平移动：transform: translateX(n);
• 垂直移动：transform: translateY(n);
• 垂直水平移动：transform: translate(x, y);

属性：

• n：移动的距离
• x：从左往右水平移动的距离（不可省略，不移写 0）
• y：从上往下垂直移动的距离（不可省略，不移写 0）

单位：px、百分比

注意：百分比是相对于本身的高宽来进行计算的

例：transform: translate(100px, 100px);（垂直水平各移动100px）

---

2. 缩放 scale

用来控制元素的放大与缩小

语法：transform: scale(x, y);

• x：默认以中心点水平缩放宽度
• y：默认以中心点垂直缩放高度

单位：无需单位，1表示1倍，2表示2倍

注意：单个值表示等比例缩放

例：transform: scale(.5);（以中心点缩小本身宽高的一半）

---

3. 旋转 rotate

让元素在二维平面内顺时针旋转或者逆时针旋转

语法：transform: rotate(度数deg);

注意：默认旋转的中心点是元素的中心点

例：transform: rotate(90deg);（顺时针旋转90度，负值是逆时针）

---

4. 基准中心点 transform-origin

语法：transform-origin: x y;

单位：px、方位名词、百分比

注意：

• 方位名词：top、bottom、left、right、center
• 默认基准中心点是元素的中心，等价于 center center
• 单个值则另一个值默认 center

例：transform-origin: left bottom;

---

5. 定位盒子水平垂直居中

可自适应定位盒子不同大小的垂直水平居中

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

---

6. 2D 转换综合写法

语法：transform: translate() rotate() scale();

注意：各属性间以空格隔开，位移要优先写在前面

---