How to access from child checkbox to child class in different parent divs?

How can i rotate all 3 pictures on click on checkbox?

I am trying with ~ but it only affects on the image where checkbox is.

HTML:

<div class="img-wrapper">
  <img class="img" src="https://via.placeholder.com/300" />
</div>

<div class="img-wrapper">
  <input class="checkbox" type="checkbox" id="rotate">
  <label class="label-checkbox" for="rotate">Rotate</label>

  <img class="img" src="https://via.placeholder.com/300" />
</div>

<div class="img-wrapper">
  <img class="img" src="https://via.placeholder.com/300" />
</div>

SCSS:

.checkbox:checked {
        ~ .img {
          transform: rotate(180deg);
        }
    }