2D转换之旋转rotate，2D转换中心点transform-origin及2D转换之缩放scale

目录

一.2D转换之旋转rotate

二.2D转换中心点transform-origin

三.2D转换之缩放scale

---

一.2D转换之旋转rotate

2D旋转指的是让元素在平面内顺时针旋转或逆时针旋转

1.语法

   transform:rotate(度数）

2.重点

rotate里面跟度数，单位是deg 比如rotate(45deg)

角度为正时，顺时针，负时，为逆时针

默认旋转的中心点是元素的中心点

二.2D转换中心点transform-origin

      我们可以设置元素转换的中心点

1.语法

    transform-origin:X Y;

2.重点

注意后面的参数X和Y用空格 隔开

XY默认转换的中心点是元素的中心点（50% 50%）

还可以给x y设置像素或者方位名词（top bottom left right center）

三.2D转换之缩放scale

   缩放就是可以放大和缩小，只要给元素添加上了这个属性就能控制它放大还是缩小

1.语法

  transform:scale(x,y)

2.注意

其中的x和y用逗号隔开

transform:scale(1,1)    宽和高都放大一倍，相当于没有放大

transform:scale(2,2)    宽和高都放大2倍

transform:scale(2)   只写一个参数，第二参数则和第一个参数一样，相当于scale（2，2）

transform:scale(0.5，0.5)  缩小

scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

四.2D转换综合写法

1.同时使用多个转换，其格式为：transform:translate() rotate() scale()...等

2.其顺序会影响转换的效果。（先旋转会改变坐标轴方位）

3.当我们同时有位移和其他属性的时候，记得要将位移放到最前

五.2D转换总结

1.转换transform 我们简单理解就是变形，有2D和3D之分

2.2D移动translate(x,y) 最大优势是不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的

3.可以分开写translateX(x) 和 translateY(y)

4.2D旋转rotate(度数)  可以实现旋转元素  度数单位是deg

5.2D缩放scale(x,y) 里面参数是数字不跟单位 可以是小数 最大优势是不影响其他盒子

6.设置转换中心点trans-origin:x y;  参数可以百分比，像素或者是方位名词

7.当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前