scale, rotate, translate

今天學習到了個新知識，主要是透過這部影片CSS Transform Is Dead! Use This Instead的教學內容來跟各位分享，傳統上我們寫動畫都會需要用到transform，而scale、rotate、translate為其中三種常見的動畫屬性，在現在的CSS寫法中，我們可以將這三者獨立出來，不用再寫進transform裡面，也就是說動畫寫法更加自由了些，不必綁上許多屬性，接下來就透過些範例來多多認識他們吧!

Web Dev Simplified的YT頻道: https://www.youtube.com/c/WebDevSimplified

scale

// 傳統上
.scale {
    transform: scale(2); //x, y值放大兩倍
    transform: scale(1, 1.5); //x維持，y放大1.5倍
}
// 現在
.scale {
    scale: 2;
    scale: 1, 1.5;
}

scale: https://developer.mozilla.org/en-US/docs/Web/CSS/scale

rotate

// 傳統上
.rotate {
    transform: rotate(45deg); //依照z軸，也是我們觀看者的角度旋轉45deg
    transform: rotate3d(0, 1, 1, 45deg); //依照y軸、z軸旋轉45deg
}
// 現在
.rotate {
    rotate: 45deg;
    rotate: z 45deg; // 特別指定z軸
    rotate: 0 1 1 45deg;
}

rotate: https://developer.mozilla.org/en-US/docs/Web/CSS/rotate

translate

// 傳統上
.translate {
    transform: translate(200px); // X軸向右移動200px
    transform: translate(-50%, -50%); // X、Y長度各反向移動50%
}
// 現在
.translate {
    translate: 200px;
    translate: -50% -50%;
}

translate: https://developer.mozilla.org/en-US/docs/Web/CSS/translate

scale, rotate, translate 基本用法範例: https://codepen.io/stevetanus/pen/QWrqeKM

應用比較

假設我們有個箱子，一開始我們加上縮小的屬性(.small):

// 傳統上
.small {
    transform: scale(0.5);
}
// 現在
.small {
    scale: 0.5;
}

我們現在要將它右移50px，加上移動的屬性(.moved):

// 傳統上
.moved{
    transform: scale(0.5) translate(50px);
}
// 現在
.moved {
    translate: 50px;
}

我們會發現，若要維持原本的狀態下，transform內的屬性會越來越多，而現在的寫法只需要再加上traslate屬性就好。
而這樣很高重複的屬性可以用變數解決:

.box {
  margin: 50px;
  width: 200px;
  height: 200px;
  background: red;
  transform: 
    scale(var(--scale, 1))
    translate(var(--translate, 0))
    rotate(var(--rotate,0))
}
.box.small {
  --scale: .5;
}

.box.moved {
  --translate: 50px;
}

但是使用變數解決的話，又會碰到動畫效果不順暢的問題，我們加上旋轉的動畫:

.box:hover{
  // 500ms內不停來回旋轉45度
  animation: rotate 500ms infinite alternate;
}

@keyframes rotate{
  0% {
    --rotate: 0;
  }
  100% {
    --rotate: 45deg;
  }
}

我們會發現，它只會在兩個變數改變，期間沒有動畫效果。
然後我們使用新的rotate屬性:

@keyframes rotate-new {
  0% {
    rotate: 0;
  }
  100% {
    rotate: 45deg;
  }
}

可以發現，有著順暢的動畫效果。
動畫CodePen: https://codepen.io/stevetanus/pen/BaxmaaE

總結

1. scale, rotate, translate現在為獨立屬性，而非在transform底下
2. 疊加屬性時，不用再重述之前的狀態
3. 重複屬性可以用變數解決，但在動畫時會出問題

後記

剛好在youtube上面看到今天主題的教學影片，同時間今天的CSS100挑戰題目運用了大量scale, rotate, translate，因此我就想說出個番外篇，先來研究一下新的寫法，並運用在之後的挑戰，感謝各位閱讀至此，如果有問題請再和我說~