0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>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.”</p>
1
<p>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.”</p>
2
<p>Add the following to the rule for the selected state:</p>
2
<p>Add the following to the rule for the selected state:</p>
3
input[type="checkbox"]:checked ~ label::before { ... }<p>We will add a rotation transform, and we will add the following properties to describe the smooth transform to the rule:</p>
3
input[type="checkbox"]:checked ~ label::before { ... }<p>We will add a rotation transform, and we will add the following properties to describe the smooth transform to the rule:</p>
4
label::before { ... }<p>We need to do this in order for the rotation to occur smoothly in both directions (when selecting and unselecting).</p>
4
label::before { ... }<p>We need to do this in order for the rotation to occur smoothly in both directions (when selecting and unselecting).</p>
5
<p>Indeed, you can just as easily apply transitions to pseudo-elements as you can to normal elements.</p>
5
<p>Indeed, you can just as easily apply transitions to pseudo-elements as you can to normal elements.</p>
6
<p>Hereinafter, we will intensively use transforms. Therefore, you can repeat them in the<a>“2D transforms” chapter</a>.</p>
6
<p>Hereinafter, we will intensively use transforms. Therefore, you can repeat them in the<a>“2D transforms” chapter</a>.</p>