Térbeli üveglap

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

    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;

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

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.04),
            rgba(142,232,212,.025)
        ),
        #0a1014;

    border: 1px solid rgba(142,232,212,.24);
    border-radius: 20px;

    color: #f2f4f0;
    font-family: Arial, sans-serif;

    transform-style: preserve-3d;
    perspective: 1200px;

    transition:
        transform .18s ease-out,
        box-shadow .45s ease,
        border-color .45s ease;
}


/* ÜVEGREFLEX */

.we-glass3d-reflection {
    position: absolute;
    z-index: 2;

    width: 65%;
    height: 180%;

    top: -40%;
    left: var(--reflection-x, 15%);

    transform:
        rotate(25deg)
        translateX(-80%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.035),
            rgba(255,255,255,.32),
            rgba(142,232,212,.10),
            transparent
        );

    filter: blur(2px);

    opacity: 0;

    transition:
        left .12s ease-out,
        opacity .35s ease;

    pointer-events: none;
}


/* FINOM FÉNYFELÜLET */

.we-hover-glass3d::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at var(--reflection-x, 50%)
                       var(--reflection-y, 50%),
            rgba(142,232,212,.14),
            transparent 38%
        );

    opacity: 0;

    transition: opacity .4s ease;

    pointer-events: none;
}


/* TARTALOM */

.we-glass3d-content {
    position: relative;
    z-index: 3;

    transform: translateZ(35px);

    transition:
        transform .3s ease;
}

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

    margin-bottom: 12px;

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

    color: #8ee8d4;
}

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

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

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

    margin-top: 10px;

    font-size: 13px;
    color: rgba(242,244,240,.62);
}


/* HOVER */

.we-hover-glass3d:hover {

    border-color:
        rgba(142,232,212,.65);

    box-shadow:
        0 30px 65px rgba(0,0,0,.55),
        0 0 40px rgba(142,232,212,.12);
}

.we-hover-glass3d:hover::before {
    opacity: 1;
}

.we-hover-glass3d:hover .we-glass3d-reflection {
    opacity: 1;
}

const glass3D = document.querySelector('.we-hover-glass3d');

glass3D.addEventListener('mousemove', function(e) {

    const rect = this.getBoundingClientRect();

    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    const centerX = rect.width / 2;
    const centerY = rect.height / 2;

    const rotateY =
        ((x - centerX) / centerX) * 7;

    const rotateX =
        ((centerY - y) / centerY) * 7;

    const reflectionX =
        (x / rect.width) * 100;

    const reflectionY =
        (y / rect.height) * 100;

    this.style.transform =
        `perspective(1200px)
         rotateX(${rotateX}deg)
         rotateY(${rotateY}deg)
         translateY(-8px)
         scale(1.015)`;

    this.style.setProperty(
        '--reflection-x',
        reflectionX + '%'
    );

    this.style.setProperty(
        '--reflection-y',
        reflectionY + '%'
    );

});

glass3D.addEventListener('mouseleave', function() {

    this.style.transform =
        'perspective(1200px) rotateX(0deg) rotateY(0deg) translateY(0) scale(1)';

});