transform 全解

一、四个常用功能

• 位移：translate

• 缩放：scale

• 旋转：rotate

• 倾斜：skew

---

1. 位移 translate

• 向 X 轴方向移动：translateX()

  .demo{
        transform:translateX(6px);
    }
  

• 向 Y 轴方向移动：translateY()

  .demo{
        transform:translateY(50%);
  
        /* 向Y方向移动(自身的width和height属性)50% */
    }
  

• 向 Z 轴方向移动(必须配合一个视点（三维中的原点）): translateZ()

  .father {
      perspective:1000px;
      /*垂直屏幕正中心向里1000px*/
  }
  .demo {
      transform:translateZ(50px);
      /* 这个就是近大远小的原理了 */
  }
  

• 缩写语法

    transform:translate(x,y)
  
    transform:translate3d(x,y,z)
  

案例 ： 绝对元素的居中

    left:50%;
    top:50%;
    transform:translate(-50%,-50%);

---

2、缩放 scale：用的少，容易出现模糊

• X 方向缩放：scaleX()

  .demo {
      transform:scaleX(1.5);
  
      /* X 方向变为原来的1.5倍 */
  }
  

• Y 方向缩放：scaleY()

  .demo {
      transform:scaleX(1.2);
  
      /* Y 方向变为原来的1.2倍 */
  }
  

• 缩写语法

  transform: scale(x, y);
  

---

3、旋转 rotate:一般用于 360 旋转制作 loading

• 以 Z 轴为轴旋转（默认）: rotate() | rotateZ()

    .demo {
        transform:rotateZ(45deg) | rotate(45deg);
    }
  

• 以 X 轴为轴旋转: rotateX()

    .demo {
        transform:rotateX(45deg);
    }
  

• 以 Y 轴为轴旋转: rotateY()

    .demo {
        transform:rotateY(45deg);
    }
  

4、倾斜 skew:用的较少

• 向 X 轴倾斜: skewX()

  .demo {
      transform:skewX(15deg);
  }
  

• 向 Y 轴倾斜: skewY()

  .demo {
      transform:skewY(15deg);
  }
  

二、transform 组合效果

    .demo {
        transform:scale(1.5),rotate(45deg);
    }

    .demo1{
        transform:none; //取消所有样式
    }

三、使用说明

• 一般需要配合transition过渡

• inline 元素不支持 transform,必须先 display:block