單獨的transform屬性

Individual Transform Properties支援度:Can I Use)

這真是個振奮人心的消息，transform屬性終於可以分開寫了，影響最大的應該就是動畫效果了

寫法的差異:

看一下以往的寫法:
為了想要呈現hover scale(2)的效果，rotate(45deg)還要再多寫一遍

/* befroe */
.box{
  width:200px;
  height:200px;
  background-color:red;
  transition:all .3s;
  transform:rotate(45deg);
  &:hover{
    transform:rotate(45deg) scale(2);
  }
}

有了Individual Transform Propertie以後:

.box{
  width:200px;
  height:200px;
  background-color:red;
  transition:all .3s;
  rotate:45deg;
  &:hover{
    scale:2;
  }
}

排序前情提要:

大家都知道transform的寫法排序會影響作用的效果:
以下這兩種transform裡的各項屬性只有排序的不同，卻會影響最後呈現效果，像是

/* 1.先scale(2)再位移，位移X的50%就是原本沒有scale的兩倍 */
transform:scale(2) translateX(50%) rotate(30deg);
/* 2.先rotate，位移X的50%,最後scale的兩倍 */
transform:rotate(30deg) translateX(50%) scale(2);
最後的效果1最後的位移X位置會比2還多

排序的差異:

目前這兩種寫法都可以work

使用同種寫法的情況

• transform property的寫法，效果產生順序會是由左至右
• 而individual transformation properties的順序則是固定translate > rotate > scale。

使用不同種寫法的情況
individual transformation properties > transform property
=>translate > rotate > scale ,then transform property

codepen範例

IT15-Day25-Individual Transform Properties

參考來源

• https://web.dev/css-individual-transform-properties/?fbclid=IwAR08mcCT_hLtlL5ByG1OpI1oJNax0iZMCPhYUzJEtdeaCwX5zDzzg7byXXo