平面转换

● 改变盒子在平面内的形态（位移、旋转、缩放）
● 2D转换

平面转换属性

● transform

1.位移

l 语法：transform: translate(水平移动距离, 垂直移动距离);
l 取值（正负均可）
Ø 像素单位数值
Ø 百分比（参照物为盒子自身尺寸）
注意：X轴正向为右，Y轴正向为下
l 技巧
Ø translate()如果只给出一个值, 表示x轴方向移动距离
Ø 单独设置某个方向的移动距离：translateX() & translateY()

转换注意点：
1.tf属性对于行内元素是无效的；
2.添加了tf属性的盒子可以提高盒子层级，保留原来的位置--类似于相对定位的特点。

位移-绝对定位居中

目标：使用translate快速实现绝对定位的元素居中效果
原理：位移取值为百分比数值，参照盒子自身尺寸计算移动距离

image.png

位移-左右侧移

双开门案例，左右侧各移一半

image.png

2.旋转

目标：使用rotate实现元素旋转效果
l 语法
Ø transform: rotate(角度);
注意：角度单位是deg
l 技巧：取值正负均可
Ø 取值为正, 则顺时针旋转
Ø 取值为负, 则逆时针旋转

3.转换原点

目标：使用transform-origin属性改变转换原点
l 语法
Ø 默认圆点是盒子中心点
Ø transform-origin: 原点水平位置 原点垂直位置;
l 取值
Ø 方位名词（left、top、right、bottom、center）
Ø 像素单位数值
Ø 百分比（参照盒子自身尺寸计算）

4.多重转换

目标：使用transform复合属性实现多形态转换
多重转换原理
Ø 旋转会改变网页元素的坐标轴向
Ø 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
注意书写：

image.png

5.缩放

目标：使用scale改变元素的尺寸
l 语法
Ø transform: scale(x轴缩放倍数, y轴缩放倍数);
l 技巧
Ø 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
Ø transform: scale(缩放倍数);
Ø scale值大于1表示放大, scale值小于1表示缩小