什麼是transform變形

.box {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  transform: 語法如下;
}

位移

.box {
  transform: none;                         /*取消位移*/
  transform: translate(200px,-100px);      /*X上移200Px,Y上移100px*/
  transform: translateX(200px);
  transform: translateY(-100px);
}

旋轉

.box {
  transform: rotate(30deg);
  transform: rotate(-360deg);
}

縮放

.box {
  transform: scale(1.5);
  transform: scale(0.5);
  transform: scale(1.5,2);
  transform: scaleX(1.5);
  transform: scaleY(2);
}

傾斜

.box {
  transform: skew(45deg,-20deg);
  transform: skewX(45deg);
  transform: skewY(-20deg);
}

矩陣

.box {
  transform: matrix(1,0,0,1,30,30);
}

多個變形屬性一起寫 用空格隔開

.box {
  transform: rotate(20deg) scale(1.5);
}

更改中心點(基準點)

.box {
  transform-origin: x y;
  transform-origin: center center;
  transform-origin: 50% 50%;
  transform-origin: 0 50%;
  transform-origin: left top;
  transform-origin: 0px 0px;
}