transformの個別プロパティについて

transformプロパティは translate や rotate、scale などさまざまな値があり、アニメーションをさせる際には、調整が面倒だった。

.before {
  transform: translateX(0px) rotate(0deg);
}
/* 既存の値をもう一度書かなくてはいけない */
.after-1 {
  transform: translateX(100px) rotate(0deg);
}
/* 値をひとつにする場合は、matrix()を使用して値をひとつにする必要があった */
.after-2 {
  transform: matrix( ~~~ );
}

CSSカスタム変数が登場してからは、カスタム変数を利用することで少し便利になった。

:root {
  --translateX: 0px;
  --rotate: 0deg;
}
.before {
  transform: translateX(var(--translateX)) rotate(var(--rotate));
}
.after {
  --translateX: 100px;
}

だが、個別のプロパティが誕生したため、今後はほとんどのブラウザで個別指定が簡単になる。

https://caniuse.com/?search=translate

.before {
  translate: 0px;
  rotate: 0deg;
}
.after {
  translate: 100px;
}