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

Question

tripcollor @tripcollor

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

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

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

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

Вопрос задан более трёх лет назад
258 просмотров

4 комментария

Подписаться 1 Оценить 4 комментария

Сергей Тутуков @sftutukov

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

Написано более трёх лет назад
tripcollor @tripcollor Автор вопроса

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

Написано более трёх лет назад
Сергей Тутуков @sftutukov
tripcollor:
в примере https://jsfiddle.net/cohxbc0c/ на просвет влияет
.card-rotate_back { ... overflow-x: hidden; overflow-y: scroll; }
Написано более трёх лет назад
tripcollor @tripcollor Автор вопроса

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

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

3 комментария

tripcollor @tripcollor Автор вопроса

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

Написано более трёх лет назад
Евгений Тройнов @tot0ro

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

Написано более трёх лет назад
tripcollor @tripcollor Автор вопроса

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

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

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

Написано более трёх лет назад

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

Веб-разработка

+1 ещё

Простой
Как работает спам сообщений в ютубе?
- 1 подписчик
- 46 минут назад
- 38 просмотров
2

ответа
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- 13 часов назад
- 37 просмотров
0

ответов
CSS

Простой
Не работает скролл на фоне блока. Как исправить?
- 1 подписчик
- 15 часов назад
- 32 просмотра
1

ответ
HTML

+1 ещё

Простой
Как поместить картинку рядом с текстом?
- 1 подписчик
- 18 часов назад
- 70 просмотров
2

ответа
CSS

Простой
Как выровнять по высоте заголовки в карточках товаров?
- 1 подписчик
- 22 часа назад
- 77 просмотров
3

ответа
Веб-разработка

Простой
Как сделать чтобы при нажатии на кнопку или сылку в div блоке открывалась галерея?
- 1 подписчик
- 22 часа назад
- 29 просмотров
0

ответов
HTML

+1 ещё

Средний
Как в файле svg заставить работать события?
- 3 подписчика
- вчера
- 674 просмотра
2

ответа
CSS

Средний
Почему у элемента такое поведение?
- 4 подписчика
- вчера
- 2029 просмотров
0

ответов
CSS

Простой
Почему не работает transition свойство в scss файле через webpack?
- 1 подписчик
- вчера
- 61 просмотр
2

ответа
HTML

+1 ещё

Простой
Почему верхние и нижние внешние отступы пустого блока не схлопываются?
- 2 подписчика
- вчера
- 202 просмотра
4

ответа
Показать ещё Загружается…

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

React разработчик

Uptrade

от 150 000 до 200 000 ₽

Нужно написать мини-текст (комментарий) на английском

24 апр. 2024, в 12:47

300 руб./за проект

Разработка дизайна коробки в развернутом виде

24 апр. 2024, в 12:13

2000 руб./за проект

Нужна лендинг страница для telegram канала

24 апр. 2024, в 12:11

1000 руб./за проект

работающее решение
https://codepen.io/jwild/pen/qoDhG
Сергей Тутуков: Дело в том что и у меня работает.
Тут вот в чем проблема: если располагать внутри карточек абсолютно спозиционорованные элементы, то они ведут себя таким образом, т.е просвечивают.
Мне надо избавится от этого, и в тоже время я не могу избавится от абсолютного позиционирования.
tripcollor:
в примере https://jsfiddle.net/cohxbc0c/ на просвет влияет
.card-rotate_back { ... overflow-x: hidden; overflow-y: scroll; }
Сергей Тутуков: Спасибо =)
Решил проблему и весь нужный мне функционал остался)
https://jsfiddle.net/cohxbc0c/7/

Answer 1 · 2017-03-22 09:58:15

Добавить свойство 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;

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

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

Минуточку внимания

Войдите на сайт