[CSS] transform-origin: change the way of element's transformations
For example, a checkbox mark, if we show / hide by:
transform: scale(0);
by default it shows up from center, we want it from "bottom left", we can do:
.checkbox { .input__control { border-radius: var(--border-radius); } .input__control svg { width: 0.65em; transform: scale(0); transition: 120ms transform ease-in-out; transform-origin: bottom left; } input:checked + .input__control svg { transform: scale(1); } }