How to toggle bars when checkbox is checked without js

how to toggle it , it is not working , i want to transform the bar. when checkbox is checked.

<div class="bars">  <input type="checkbox" id="menuToggle"/>
            <label for="menuToggle" class="menu-icon">
        <span class="bar-1"></span>
        <span class="bar-2"></span>
        <span class="bar-3"></span>
</label>
    </div>

here is css

.menu-icon .bar-1,.menu-icon .bar-2,.menu-icon .bar-3{display:block;background:#000;height:4px;margin:4px 0;width:30px;transition:0.5s ease;}

this for checked box

#menuToggle:checked ~ .menu-icon .bar-1 {transform:rotate(-45deg) translate(-8px,3px);-webkit-transform:rotate(-45deg) translate(-8px,3px)}
 #menuToggle:checked ~ .menu-icon .bar-2 {opacity:0;}
 #menuToggle:checked ~ .menu-icon .bar-3 {transform:rotate(45deg) translate(-8px,-3px);-webkit-transform:rotate(45deg) translate(-8px,-3px);}

It is not working please tell me the steps how it works :D