Kettős perspektíva – WebElements

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

    <div class="we-perspective-back"></div>

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

            <strong>Kettős perspektíva</strong>

            <small>
                Rétegzett 3D térhatás
            </small>
        </div>
    </div>

</div>

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

    position: relative;

    perspective: 1000px;

    font-family: Arial, sans-serif;
}

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

    border-radius: 20px;

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

.we-perspective-back {
    background: #151d21;

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

    transform:
        translateZ(-35px)
        rotateY(0deg)
        scale(.94);
}

.we-perspective-front {
    display: flex;
    align-items: center;

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

    background:
        linear-gradient(
            145deg,
            #11191d,
            #0a1013
        );

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

    color: #f2f4f0;

    transform:
        translateZ(0);
}

.we-perspective-content {
    transform: translateZ(25px);

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

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

    margin-bottom: 12px;

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

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

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

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

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

    margin-top: 10px;

    font-size: 13px;

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

.we-hover-perspective:hover .we-perspective-front {
    transform:
        translateZ(30px)
        rotateY(-4deg)
        translateX(-7px);

    border-radius:
        24px 16px 22px 18px;
}

.we-hover-perspective:hover .we-perspective-back {
    transform:
        translateZ(-10px)
        rotateY(4deg)
        translateX(12px)
        scale(.96);

    border-radius:
        18px 24px 16px 22px;
}

.we-hover-perspective:hover .we-perspective-content {
    transform:
        translateZ(48px)
        translateX(5px);
}

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

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