Как избавится от просветов при 3d повороте с внутренними абсолютно спозиционированными элементами?

Question

[tripcollor]

Вот два примера
Переворачивайте карточку
https://jsfiddle.net/cohxbc0c/
https://jsfiddle.net/cohxbc0c/1/

На фронтальной стороне карточки абсолютно спозиционированный круг (это важно от абсолютного позиионирования внутри элементов "card-rotate-item" я не могу отказаться), в нем просвечивается текст который на обратной стороне карточки.
Если поставить z-index у круга то как показано на втором примере этот круг просвечивается уже на обратной стороне карточки.
Еще один не маловажный момент: обратной стороне карточки текст который не влазит в контейнер и в нем прописано свойство overflow-y: scroll; и этот скрол тоже просвечивает на фронтальной стороне карточки.

Как избавится от просветов?

Comments

[Сергей Тутуков]

работающее решение
https://codepen.io/jwild/pen/qoDhG

[tripcollor]

Сергей Тутуков: Дело в том что и у меня работает.
Тут вот в чем проблема: если располагать внутри карточек абсолютно спозиционорованные элементы, то они ведут себя таким образом, т.е просвечивают.
Мне надо избавится от этого, и в тоже время я не могу избавится от абсолютного позиционирования.

[Сергей Тутуков]

tripcollor:
в примере https://jsfiddle.net/cohxbc0c/ на просвет влияет

.card-rotate_back {
    ...
    overflow-x: hidden;
    overflow-y: scroll;
}

[tripcollor]

Сергей Тутуков: Спасибо =)
Решил проблему и весь нужный мне функционал остался)
https://jsfiddle.net/cohxbc0c/7/

Answer 1

[Евгений Тройнов]

Добавить свойство z-index у круга:

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;

Comments

[tripcollor]

Евгений Тройнов: На самом деле с кругом не помогло=)
Переверните карточку ) https://jsfiddle.net/cohxbc0c/1/

[Евгений Тройнов]

tripcollor: Тогда создавайте элемент обертку в него ложите 2 дива в одном текст в другом круг. По другому никак не сделать так как в понимании DOM никакого преобразования элемента не происходит, а значит и свойства работать не будут.

[tripcollor]

Уже решил проблему)
https://jsfiddle.net/cohxbc0c/7/
Как написал Сергей Тутуков вот этот кусок кода на просвет влиял:

.card-rotate_back {
...
overflow-x: hidden;
overflow-y: scroll;
}

Убрал его сделал доп обертку для задней стороны чтобы остался скрол и все норм)