最近剛好工作上被 transform 搞得超級煩，
決定就來介紹一下他。

剛剛認真去看了一下有哪些值，
發現 transform 有一個叫 matrix 的東東，
但我目前都沒有使用過，
也沒有花時間研究過，所以他我會跳過～
transform 的值都有 X、Y、Z 三軸可以分別做設定。

1. rotate

顧名思義就是旋轉啦～
裡面的值，我通常都是直接使用 deg，也可以用 rad 或 turn。

2. skew

元素做傾斜，
跟 rotate 一樣，
通常都是直接使用 deg，也可以用 rad 或 turn。

3. translate

這是個滿有趣的屬性，裡面的值可以填像素或百分比，
x軸的話，負值往左，正值往右，
y軸的話，負值向上，正值向下，
像素的話就很單純，你設定多少就是移動多少，
但如果是百分比的話，
就會變成移動自身的幾 %，
translate 是拿來做絕對垂直水平居中很常見的搭配用法。

4. scale

非常好用的 scale，
有時候做動畫效果的時候就直接設定 scale(0) 讓他不見，
再設定 scale(1) 讓他現身，
值的話，大於 1 就是放大，小於就是縮小，
負值的話可以做到水平鏡射並且縮放。

提醒

使用多種 translate 值的時候，
中間直接空一格即可，不需要加逗號。

.box{
  transform: translate(10px, 20px) rotate(45deg) skew(20deg) scale(-1);
}

今天就先到這裡啦～
我們明天見。