<!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)")
})
This Pen doesn't use any external CSS resources.