transform（2D）的使用

transform（又称为变形）

                变形可以改变盒子在平面内的形态（位移、旋转、缩放等等）

translate（位移）

                translate是可以将元素从其当前位置移动（根据给定的 X 轴和 Y 轴参数）

语法规范

transform: translate(x, y);
transform: translateX(x);
transform: translateY(y);

在这个位移布局方式上就发现一个问题，我们需要将translate与margin的使用进行区分

• margin：移动盒子模型的时候会影响其余的盒子模型的布局，将把其他布局好的盒子模型挤开。这个点上就与css定位中的相对定位相似。

• translate（位移）：移动盒子模型的时候不会影响其余的盒子模型的布局。也就是说就是常说的不会脱标。这个点与css定位中的绝对定位相似。

那么translate使用的场景有哪些

1.  盒子模型的上下移动不能影响其他盒子模型

2. 盒子模型的水平和垂直居中，可以不用不使用绝对定位进行布局。

3. 轮播图的动画效果也可以通过translate进行布局

需要注意的情况是在使用translate进行布局的时候可以使用百分比来表示，其中移动百分比的是相对于盒子模型本身的宽度

 

rotate（旋转）

                rotate（旋转）根据给定的度数顺时针或逆时针旋转元素。

语法规范

transform: rotate(45deg);   //注意一定要记得单位：度(deg)

如果角度是正度数，则是顺时针旋转

如果角度是负度数，则是逆时针旋转

transform-origin （设置中心点）

                顾名思义就是设置rotate的中心点位置

  transform-origin: right bottom;        //以盒子模型的右下为旋转的中心点

多样式变形的小技巧 

当出现需要同时进行位移和旋转时我们需要先写位移（translate）再写旋转（rotate），css的书写顺序会影响代码的执行。

transform: translate(-50%, -50%) rotate(360deg);  

scale (缩放)

                scale (缩放)就是增加或减少元素的大小（根据给定的宽度和高度参数）

语法规范

transform: scale(2.3)；   //元素增加到其原始宽度的两倍和原始高度的三倍

skew(倾斜)

               skew(倾斜) 将元素沿 X 轴和 Y 轴倾斜给定角度

语法规范

transform: skew(20deg, 10deg);   //元素沿 X 轴倾斜 20 度，沿 Y 轴倾斜 10 度

同时需要注意的是以中心点的位置来进行缩放的，不会影响其他的盒子模型的位置。