Térhajlítás

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

    perspective: 1000px;

    font-family: Arial, sans-serif;
}

.we-bend-surface {
    width: 100%;
    height: 100%;

    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;

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

    background:
        linear-gradient(
            145deg,
            #12191d,
            #0b1013
        );

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

    color: #f2f4f0;

    transform:
        rotateX(0)
        rotateY(0)
        translateZ(0);

    transform-style: preserve-3d;

    transition:
        transform .65s cubic-bezier(.22,1,.36,1),
        border-radius .65s cubic-bezier(.22,1,.36,1),
        box-shadow .65s ease;
}

.we-bend-content {
    position: relative;
    z-index: 2;

    transform: translateZ(25px);

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

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

    margin-bottom: 12px;

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

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

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

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

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

    margin-top: 10px;

    font-size: 13px;

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

.we-bend-surface:hover {
    border-radius: 26px;

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

.we-bend-surface:hover .we-bend-content {
    transform:
        translateZ(40px)
        translateY(-3px);
}

const bend = document.querySelector('.we-hover-bend');
const surface = bend.querySelector('.we-bend-surface');

bend.addEventListener('mousemove', (e) => {

    const rect = bend.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) * 5;

    surface.style.transform =
        `rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(8px)`;

});

bend.addEventListener('mouseleave', () => {

    surface.style.transform =
        'rotateX(0deg) rotateY(0deg) translateZ(0)';

});