Roman Palesika2016-09-19 16:08:14
Roman Palesika, 2016-09-19 16:08:14

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

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

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

.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

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question