<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Card 3D view Parallax</title>
        <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
    </head>

    <body>

        <div id="top">
            <div class="perspective">
                <div class="card">
                    <div class="thumb"></div>
                    <h2>Virtual Reality</h2>
                    <span>Dreaming with your eyes open!</span>
                </div>
            </div>
        </div>
    </body>
</html>

body {
    background: linear-gradient(to right, #ffffff, #f8dce2);
    font-family: 'Varela Round', sans-serif;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.perspective {
    width: 100%;
    perspective: 1000px;
}

#top {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.card {
    width: 270px;
    height: 413px;
    margin: auto;
    box-shadow: 0 70px 63px -60px #494848;
    transform-style: preserve-3d;
    transition: transform .05s linear;

    .thumb {
        background:url('https://i.pinimg.com/564x/f4/81/4d/f4814d2d0e635505eaa6971704cbed79.jpg') no-repeat center;
        background-size: cover;
        height: 100%;
        width: 100%;
        border-radius: 15px;

        &:after {
            background: inherit;
            content: '';
            display: block;
            position: absolute;
            left: -60px;
            top: 40px;
            width: 100%;
            height: 108%;
            z-index: -1;
            filter: blur(55px);
        }
    }

    h2 {
        position: absolute;
        top: 0;
        left: -60px;
        font-size: 40px;
        font-weight: 100;
        transform: translateZ(80px);
    }

    span {
        position: absolute;
        bottom: 40px;
        right: -280px;
        font-size: 37px;
        font-weight: 600;
        transform: translateZ(35px);
    }
}
View Compiled 
var o = $(".card");
$("#top").on("mousemove", function (t) {
    var e = -($(window).innerWidth() / 2 - t.pageX) / 30,
        n = ($(window).innerHeight() / 2 - t.pageY) / 10;
    o.attr("style", "transform: rotateY(" + e + "deg) rotateX(" + n + "deg);-webkit-transform: rotateY(" + e + "deg) rotateX(" + n + "deg);-moz-transform: rotateY(" + e + "deg) rotateX(" + n + "deg)")
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js