А теперь последний штрих: будем плавно поворачивать псевдочекбокс в выделенном состоянии на 45 градусов. Чтобы он стал похож на «галочку».

В правило для выделенного состояния:

input[type="checkbox"]:checked ~ label::before { ... }

мы добавим трансформацию поворота, а свойства для описания плавного перехода добавим в правило:

label::before { ... }

Это нужно для того, чтобы поворот происходил плавно в обе стороны: при выделении и при снятии выделения.

Да, к псевдоэлементам тоже можно запросто применять переходы, как и к обычным элементам!

Далее мы будем интенсивнее использовать трансформации, поэтому вы можете повторить их в части «Двумерные трансформации».