Tech tip - animating checkboxes and radio button

I make my checkboxes and radio buttons rotate when they are clicked.

If the checkbox is clicked ('active') then the checkbox is immediately rotated 180 degrees. When the click is over, then the checkbox slowly rotates back to its original position.

input[type="checkbox"] {
    transition: transform 1s;
    display: inline-block;
}
input[type="checkbox"]:active {
    transform: rotate3d(0,0,1,180deg);
    transition: 0s;
}

This is on 'codepen' at: codepen.io/Bert-Beckwith/pen/OJrYLLN

There are more tips at: bbingo.xyz/t