tripcollor
@tripcollor

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

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

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

Как избавится от просветов?
  • Вопрос задан
  • 252 просмотра
Пригласить эксперта
Ответы на вопрос 1
tot0ro
@tot0ro
Front - end developer
Добавить свойство 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;
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы