After transforming a layer, its visibility relative to another layer changes, what's the problem?

Question

css

Hello! I need your advice, because I myself do not understand what could be wrong. We have something like this structure:
html

<div class="wrapper">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

css:

.wrapper {width: 805px; height: 805px; position: relative;}
.child1 {position: relative; width: 100%; height: 100%;}
.child2 {position: absolute; display: table; width: 500px; height: 500px; left: 50%; top: 50%; margin: -250px 0 0 -250px; overflow: hidden; border-radius: 50%;-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);}

The idea is that in the middle of the wrapping block there is a circle with overflow:hidden, the content from which is limited to this circle. The content from .child1 is clickable, the corners from .child2 are cut off, everything is fine. But I need to rotate .child1 (I'm implementing a wheel model) while child2 remains stationary. The problem is that after rotating (via css transforms) the corners of .child2 are no longer clipped, my layer mask doesn't work. I don't know what the problem is. I will be glad to any suggestions. Thanks in advance