組み合わせられない

⇩みたいなクラスが用意されていて

	.r90 {
		transform: rotate(90deg);
	}

	.y50 {
		transform: translateY(50%);
	}

	.x100 {
		transform: translateX(100%);
	}

<div class="r90 x100 y50">TEXT</div>

と全部設定したいのですが これでは transform は上書きされて一番最後の y50 のものが優先され Y 軸方向に 50% 移動するだけです

組み合わせたものを定義することはできる

CSS 側を

	.r90.y50.x100 {
		transform: translateX(100%) translateY(50%) rotate(90deg);
	}

とすれば 3 つとも有効です
しかし r, x, y の組み合わせを全部事前に定義となると CSS サイズがすごいことになります

r が 1 ずつ 0 から 360 までと x と y は 0 から 100 だとすると
361 + 101 + 101 の 563 だったものが
361 * 101 * 101 の 3,682,561 通りの定義になります

div ごとに適用

div でネストしてそれぞれに 1 クラスずつということもできます

<div class="r90">
	<div class="y50">
		<div class="x100">TEXT</div>
	</div>
</div>

ただしこれは 90 度回転させたものの中で Y 軸方向に 50% ずらして その中でさらに X 軸方向に 100% ずらしたものです
div のサイズが同じでないと % の基準はズレます
また 回転した中での Y 軸方向と回転前の Y 軸は別の方向です
通常の Y 軸は上下ですが 90 度回転した要素の中では左右になり 上が右に 下が左に対応します
そういうことを考えれば使いやすいとは言えません

JavaScript で動的に

上で書いた

	.r90.y50.x100 {
		transform: translateX(100%) translateY(50%) rotate(90deg);
	}

は全パターンを事前に書くのは無理がありますが これらのクラスを要素に設定するタイミングで 設定されてるクラスから自動でこれらを CSS に追加します
使ったものだけなので現実的なサイズに抑えられます


これまで transform を JavaScript から設定するときって基本 要素の style プロパティを直接編集する形で 事前に用意した css のクラスを設定するような方法は使ってなかったのでいまさらですが困りました
ググっても transform にまとめて書く方法しかなくて 事前定義したのを組み合わせる方法での解決策は見当たりませんでした
こういう css を動的に作ってクラス割り当てするなら style 直接のほうが良さそうですし みんな style 直接操作なんですかねー

参考用DEMO