为什么转换前还加了个2D呢？ 因为还有一个3D转换要学，本节先介绍2D平面上的转换。
2D转换这个属性 在米哈游官网里我们也见过了，在切换中英文的按钮处有一个斜杠，这个斜杠就是边框 + 转换做到的，下面我们来学习如何使用2D转换。
image.png这个灰色的斜杠，竟然是边框？！，这就是转换，让边框倾斜了。

CSS3 2D转换

image.png
image.png

1. 2D转换之移动（translate）

image.png
其实和相对定位差不多，都是根据当前位置进行偏移移动的，并且两者都不脱标。

取值

translate中如果传入的是百分比数，则会按照自身的宽高进行百分比计算。比如，盒子自身宽100px，高200px，设置translate(50%,50%)；则在横向上移动100 x 50% = 50px，在纵向上移动200 x 50% = 100px。

注意点

1.translate对行内元素是无效的（比如 span，em，i 这种行内元素标签）。
2.如果设置了translateX或者translateY，则只有最后一个能生效，也就是说如果需要 X,Y轴都移动，X,Y则不能分开写！！！

2. 2D转换之旋转（rotate）

image.png
必须注意单位，常用的单位就是deg，代表度数。也有其他的单位：
角度单位 Angle Units

角度单位 版本 描述
deg CSS3 度（Degrees）
grad CSS3 梯度（Gradians）
rad CSS3 弧度（Radians）
turn CSS3 转、圈（Turns）

应用实例

image.png
米哈游官网图中的这个灰色的斜杠，就是单边框加旋转做出来的。代码如下：
image.png

3. 2D转换之缩放 scale

image.png
缩放默认是以元素中心为准点进行缩放的，会像四周进行缩放。并且transform不会脱标，网上常见的鼠标悬停时图片会缩放就是用这个做的。

4. 设置元素转换的中心点 transform-origin

image.png
这个参数可以修改元素转换的锚点，比如旋转和缩放的默认中心都是中心轴进行变换的，通过修改这个参数可以让元素绕着不同的轴进行旋转或者以不同的锚点进行缩放。
其中方位参数，left和right代表X轴，bottom和left代表Y轴，left bottom意为左下角，其他同理。center等价于50% 50%；

应用实例

同样还是米哈游官网，边框在进行旋转前，旋转点被移动到了右上角，top right 。
image.png
*
image.png