CSS 3D-эффект флип-карты - PullRequest
       0

CSS 3D-эффект флип-карты

0 голосов
/ 27 февраля 2020

У меня есть код, который может сделать флип-карту, но я видел реализацию, которая очень впечатляет здесь: 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/ просто чтобы облегчить тестирование.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...