<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));
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.