前言：今天又是一个周末，心情不错，趁着闲暇之余，把剩下来的CSS3学习的内容全部整理出来，练习用的源码也稍微整理了一下。

2D转换

transform:translate||rotate||scale||skew

平移、旋转、缩放、斜切

1. 平移 transform:translate()

参数说明：

1. 只有一个值的情况下，表示水平方向运动，正值向右，负值向左，也可以接受百分比，百分比参照的是自身的宽，高
2. 两个值分别控制水平和垂直
3. 移动不会影响其他的元素，类似于相对定位
4. 我们可以通过盒子的绝对定位配合transform：translate（-50%，-50%）实现一个没有宽度高度的盒子水平垂直居中 ,如果没有宽度的话，盒子最大的宽只能达到父盒子的一半
5. 如果想要单个的方向移动 可以写成 translateX（）和translateY（）

  
          
     
      1
     
 
     
      2
     
  

2. 旋转 transform:rotate()

参数说明：

1. 单位是deg 角度
2. 整体发生旋转（包括里面的内容）
3. 正值是顺时针方向旋转 负值反之
4. 中心点可以控制 transform-origin：值（值可以是方位名词，可以是像素，也可以是百分比,参照的是自身的宽高）

  
          
     
      1
     
  

3.缩放 transform:scale()

参数说明：

1. 没有单位，接受数值和小数
2. 只有一个值的情况，整体缩放（等比例）
3. 两个值的情况，宽度和高度分别缩放（可能会变形）
4. 边框也是会缩放的，并且如果想要一个方向缩放，另外一个方向需要写一个1
5. 缩放的中心点也可以被控制

  
          
     
      1
     
  

4.斜切 transform:skew()

参数说明：

1. 单位是deg
2. 只有一个值的情况下，水平斜切
3. 两个值的情况下，水平垂直分别斜切
4. 斜切的中心点也可以被控制 如果是X轴斜切 中心点控制上下 如果是Y轴斜切 中心点控制左右

  
          
     
      1
     
  

5.过渡 transition

transition：属性 持续时间 过渡曲线 延时

过渡不是动画，是由css的一种状态到另外一种状态中间变换的过程。

值说明：

1. 那个属性需要过渡就写什么属性 可以用all来代替全部 （必写）
2. 过渡持续的时间，单位可以s或者是ms （必写）
3. 过渡的曲线
4. 过渡从延时多长时间开始

6.2D转换总结

1. 移动，斜切，放大都是可以通过X或者Y去控制某一个方向
2. 中心点可以控制旋转，缩放，斜切
3. 如果我们想要多个2D效果共存，需要采用连写的方式
4. 当在不同场景出现需要transfrom的时候，需要复制前面已经存在的，防止覆盖
5. Transform的转换效果顺序尽量保持统一，如果不统一会出现一些问题

  
          
     
      1