<div class="box transform translate-x-100 rotate-45"></div>
<div class="box transform transform-rotate-first translate-x-100 rotate-45"></div>
body {
  background: #121212;
}
.box {
  width: 50px;
	height: 50px;
	background-color: rebeccapurple;
}
.transform {
  --translate-x: 0;
  --translate-y: 0;
  --rotate: 0;
  --scale-x: 1;
  --scale-y: 1;
  transform: translateX(var(--translate-x)) translateY(var(--translate-y))
    rotate(var(--rotate)) scaleX(var(--scale-x)) scaleY(var(--scale-y));
}
.rotate-45 {
  --rotate: 45deg;
}
.translate-x-100 {
  --translate-x: 100px;
}
.transform-rotate-first {
	transform: rotate(var(--rotate)) translateX(var(--translate-x)) 
    translateY(var(--translate-y)) scaleX(var(--scale-x)) scaleY(var(--scale-y));
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.