Kártyaátfordulás – WebElements

<div class="we-hover-toss">

    <div class="we-toss-card">

        <div class="we-toss-content">
            <span>WebElements</span>

            <strong>Kártyaátfordulás</strong>

            <small>
                Dinamikus billenés és visszarugózás
            </small>
        </div>

    </div>

</div>

.we-hover-toss {
    width: 100%;
    max-width: 440px;
    height: 190px;
    margin: 60px auto;

    perspective: 1000px;

    font-family: Arial, sans-serif;
}

.we-toss-card {
    width: 100%;
    height: 100%;

    position: relative;

    display: flex;
    align-items: center;

    padding: 40px;
    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            #151d21,
            #0b1114
        );

    border: 1px solid rgba(255,255,255,.13);
    border-radius: 20px;

    color: #f2f4f0;

    transform-origin: 50% 100%;

    transition:
        transform .8s cubic-bezier(.16,1,.3,1),
        border-radius .7s ease,
        box-shadow .7s ease;
}

.we-toss-content {
    transition:
        transform .7s cubic-bezier(.16,1,.3,1);
}

.we-toss-content span {
    display: block;

    margin-bottom: 12px;

    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;

    color: rgba(242,244,240,.5);
}

.we-toss-content strong {
    display: block;

    font-size: 27px;
    font-weight: 500;
}

.we-toss-content small {
    display: block;

    margin-top: 10px;

    font-size: 13px;

    color: rgba(242,244,240,.55);
}

.we-hover-toss:hover .we-toss-card {
    transform:
        rotateX(7deg)
        rotateY(-10deg)
        rotateZ(-1deg)
        translateY(-8px);

    border-radius:
        24px 18px 26px 16px;

    box-shadow:
        22px 30px 50px rgba(0,0,0,.5);
}

.we-hover-toss:hover .we-toss-content {
    transform:
        translateZ(35px)
        translateX(8px)
        translateY(-3px);
}

Ehhez az animációhoz nincs külön JavaScript.

További animációk ebből a kategóriából