CSS3 2D转换之位移（translate)、旋转（rotate）、缩放（scale）以及设置旋转和缩放的中心点

2D转换概述

• 2D转换可以实现元素的位移、旋转、缩放等效果。
• 2D转换的分类有：移动（translate），旋转（rotate），缩放（scale）。

2D转换之translate

• 2D移动translate可以改变元素在页面中的位置，类似定位。

移动tranlate的语法格式如下：
transform: translate(x,y);
transform: translateX(n);
transform: translateY(n);

注意：
1、translate最大的优点是不会影响到其他元素的位置；
2、translate中的百分比单位是相对于自身元素的，比如：translate(50%,50%)；
3、x和y可以是百分比，也可以是像素值；
4、对行内标签是没有效果的

2D转换之rotate

• 2D旋转rotate是让元素在2维平面上顺时针或者逆时针旋转。

旋转rotate的语法格式如下：
transform: rotate(度数);

注意：
1、rotate里面跟的是度数，单位是deg，比如：rotate(45deg)；
2、角度为正时，顺时针旋转；角度为负时，逆时针旋转；
3、默认旋转的中心点是元素的中心点

• 2D旋转rotate的中心点是可以设置的，具体使用方法如下：

transform-origin的语法格式如下：
transform-origin: x y;

注意：
1、参数x和y中间用空格隔开；
2、rotate默认的旋转中心点是元素的中心点，即：transform-origin: 50% 50%；
3、参数x y还可以设置像素或者方位名词（top、bottom、center、left、right）

2D转换之scale

• 2D转换scale是让元素进行缩小和放大。

缩放scale的语法格式如下：
transform: scale(x,y);

注意：
1、参数x和y是用逗号隔开；
2、transform: scale(1,1)：宽和高都放大为原来的1倍，相当于没有放大；
3、transform: scale(2,2)：宽和高都放大了2倍；
4、transform: scale(2)：只写一个参数，则第二个参数和第一个一样，相当于scale(2,2)；
5、transform: scale(0.5,0.5)：宽和高都缩小为原来的一半；
6、scale缩放的最大优势是：可以设置转换中心点缩放（transform-origin），默认以中心点进行缩放。并且，利用scale进行缩放的元素不影响其他盒子

2D转换的综合写法

• 同时使用多个转换，其格式为：

  transform: translate() rotate() scale()

• 同时使用多个转换时，其转换顺序会影响转换效果。一般，当同时存在位移和其他属性的时候，我们都是把位移放到最前。

---

微信公众号也会定期更新，觉得文章写得还可以的，可以加个关注！点个赞！谢谢！