1.CSS 2d转换

transform:translate(x,y) rotate(30deg) 
//位移
translate(x,y)
//旋转
rotate()
//缩放
scale(x,y)
//倾斜
skew(x,y)
配合transform属性使用
//设置旋转元素的基点位置
transform: rotate(45deg);
transform-origin:20% 40%;

1.1 translate位移

该元素移动的位置，取决于宽度（X轴）和高度（Y)

translate(x,y)  x横坐标方向移动的距离,y纵坐标方向移动的距离div#div2
{
    transform:translate(50px,100px);
    -ms-transform:translate(50px,100px); /* IE 9 */
    -webkit-transform:translate(50px,100px); /* Safari and Chrome */
}

• 元素垂直水平居中

  <div class="one">
        <div class="two">
    </div>
  </div>
  .one{
        width:400px;
        height:400px;
        background-color: red;
        position: relative;
  }
  .two{
                width:100px;
        height:100px;
        background-color: pink;
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
  }
  

  1.2旋转rotate

  div{
  transform: rotate(30deg);
  -ms-transform: rotate(30deg); /* IE 9 */
  -webkit-transform: rotate(30deg); /* Safari and Chrome */
  }
  

  1.3缩放scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

  //scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。
  -ms-transform:scale(2,3); /* IE 9 */
  -webkit-transform: scale(2,3); /* Safari */
  transform: scale(2,3); /* 标准语法 */
  

  1.4**倾斜**skew(x,y) 方法

  x表示水平方向,y表示垂直方向
  div
  {
  transform: skew(30deg,20deg);
  -ms-transform: skew(30deg,20deg); /* IE 9 */
  -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
  }
  

  2.transition过渡

  CSS3 过渡（transition） 配合hover使用

  //改变宽度时长为2秒
  div
  {
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
  }
  div:hover{ 
    width:100px;
  }
  多项改变
  div
  {
    transition: width 2s, height 2s, transform 2s;
    // transition: all 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
  }
  div:hover{
   width:200px;
   height:200px; 
   transform:rotate(30deg)
  }
  

  3.animation动画

  // 动画的关键帧
  @keyframes animate{
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(360deg);
  }
  }
  div{
  width: 100px;
  height: 100px;
  background-color: red;
  margin:100px auto;
  animation: animate 2s linear infinite;
  /*动画名字 时长 速度  是否无限循环*/
  }
  div:hover{
  animation-play-state: paused;  /*暂停动画*/
  }