How to get rid of gaps in 3d rotation with internal absolutely positioned elements?

Question

css

Here are two examples
Flip the card
https://jsfiddle.net/cohxbc0c/
https://jsfiddle.net/cohxbc0c/1/
There is an absolutely positioned circle on the front of the card (this is important from absolute positioning inside "card-rotate-item" elements i I can’t refuse) , the text that is on the back of the card is visible in it.
If you set the z-index of the circle, then as shown in the second example, this circle is already visible on the back of the card.
Another not unimportant point: the reverse side of the card has text that does not fit into the container and the property overflow-y: scroll; and this scroll also shows through on the front side of the card.
How to get rid of gaps?

Answer 1

Add a z-index property to the circle:

position: absolute;
width: 80px;
height: 80px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: red;
-webkit-border-fit: repeat;
border-radius: 50%;
z-index: 9;