У меня есть код, который может сделать флип-карту, но я видел реализацию, которая очень впечатляет здесь: https://www.youtube.com/watch?v=7ZSPbCtD_cA где, если вы посмотрите на кнопку в верхнем правом углу, когда она переворачивает выше div, я пытался имитировать это с transform: translate3d(0px, 0px, 50px);
, это не сработало.
Итак, вот код logi c Пока у меня есть
HTML
<div class="flip-container pt-5" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img src="" alt="ticketing" class="img-fluid">
<div class="button">
<img src="" alt="movie ticketing" class="img-fluid">
</div>
</div>
<div class="back">
</div>
</div>
</div>
CSS
/* entire container, keeps perspective */
.flip-container {
perspective: 1000px;
transform: rotateY(0deg);
transition-duration: 1s;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
transition-duration: 1s;
}
.flip-container, .back, .front {
height: 320px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
border-radius: 15px;
overflow: hidden;
background-color: #62bcbc;
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
background-color: grey;
width: 100%;
border-radius: 15px;
}
.button {
position: absolute;
top: 9px;
right: 9px;
background-color: white;
border-radius: 30px;
height: 80px;
padding: 20px;
transform: translate3d(0px, 0px, 50px);
}
.button img {
max-height: 60px;
margin-top: -12px;
}
Я также сделал демонстрацию jsfiddle: https://jsfiddle.net/vtodaLjc/ просто чтобы облегчить тестирование.