[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);
  }
}