Создание 3д карточки

Question

Создание 3д карточки

Dlzder Dlzder Ученик (138), на голосовании 1 год назад

Решил создать 3д карточку, реализовал блик, не дойдя до момента с переворотом карточки начались проблемы с интерфейсом в карточке.

При создании дополнительного блока в card где будет хранится весь интерфейс перестает регистрироваться наведение, если вложить его в блик то текст отображается нормально, но при наведении на кнопку или span элемент обрастает своим фоном с бликом а позиция мыши перестает регистрироваться и карточка наклоняется обратно.
Тут карточка без интерфейса
https://codepen.io/Dlazder/pen/yLqpwXZ
Подскажите куда правильно расположить и как его позиционировать, заранее огромное спасибо!

Дополнен 1 год назад

Блик почему то перестал работать

Дополнен 1 год назад

Блик починил)

Answer 1

EVK IT Сервис К Мыслитель (5236) 1 год назад

По-идее нужно все вставить внутрь:

   
     
             .... СЮДА .....

На практике нужно смотреть что вставляешь. Покажи код со вставкой.

Dlzder DlzderУченик (138) 1 год назад

Я вроде пробовал так, получалась дичь, у кнопок появлялся свой фон с бликом и наклон переставал работать

EVK IT Сервис К Мыслитель (5236) Dlzder Dlzder, нюансов много. И говорить об абстрактном можно долго и много...

EVK IT Сервис КМыслитель (5236) 1 год назад

Все исчезает, потому что на событие mouseout карточка и ее содерживмое становится opacity = '0' - невидимое.

Dlzder Dlzder Ученик (138) EVK IT Сервис К, А как же решить данную проблему? Я сделал блик отдельным чтобы когда мышка выходит из карточки блик плавно исчезал. Пробовал использовать что-то вроде

 opacity: background 0;

Но это не работает

EVK IT Сервис КМыслитель (5236) 1 год назад

https://codepen.io/smpnjn/pen/qBVPvpZ?editors=0000
Вот из их статьи все работает. Спаны не случайны ))

EVK IT Сервис К, Ну так вы просто скопировали код оттуда) мне нужно именно на примере с моей карточкой. А чужой код читать сложно, я пока сам не напишу и не разберусь ничего не пойму вообще...