Képcsere – WebElements

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

    <div class="we-flip-inner">

        <div class="we-flip-front">
            <span>WebElements</span>
            <strong>Képcsere</strong>
            <small>3D átforduló felület</small>
        </div>

        <div class="we-flip-back">
            <span>INTERAKCIÓ</span>
            <strong>Másik oldal</strong>
            <small>A kártya teljesen átfordul hoverkor.</small>
        </div>

    </div>

</div>

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

    perspective: 1000px;

    font-family: Arial, sans-serif;
}

.we-flip-inner {
    width: 100%;
    height: 100%;

    position: relative;

    transform-style: preserve-3d;

    transition:
        transform .75s cubic-bezier(.22,1,.36,1);
}

.we-hover-flip:hover .we-flip-inner {
    transform:
        rotateY(180deg);
}

.we-flip-front,
.we-flip-back {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

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

    border-radius: 20px;

    backface-visibility: hidden;

    border: 1px solid rgba(255,255,255,.12);

    color: #f2f4f0;
}

.we-flip-front {
    background:
        linear-gradient(
            145deg,
            #12191d,
            #0b1013
        );
}

.we-flip-back {
    background:
        linear-gradient(
            145deg,
            #17201f,
            #0d1415
        );

    transform:
        rotateY(180deg);
}

.we-flip-front span,
.we-flip-back span {
    margin-bottom: 12px;

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

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

.we-flip-front strong,
.we-flip-back strong {
    font-size: 27px;
    font-weight: 500;
}

.we-flip-front small,
.we-flip-back small {
    margin-top: 10px;

    font-size: 13px;

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

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

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