Interactive online courses HTML Academy
2026-03-09 14:09 Diff
https://htmlacademy.org/courses/dynamic/smooth-transitions/checkboxes-3

And now for our final touch: we will smoothly rotate the pseudo-box in the selected state by 45 degrees. That way it will look like a “check.”

Add the following to the rule for the selected state:

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

We will add a rotation transform, and we will add the following properties to describe the smooth transform to the rule:

label::before { ... }

We need to do this in order for the rotation to occur smoothly in both directions (when selecting and unselecting).

Indeed, you can just as easily apply transitions to pseudo-elements as you can to normal elements.

Hereinafter, we will intensively use transforms. Therefore, you can repeat them in the “2D transforms” chapter.