zl程序教程

您现在的位置是:首页 >  前端

当前栏目

[CSS] transform-origin: change the way of element's transformations

CSS The of &# 39 Element Change transform
2023-09-14 08:59:12 时间

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