"3D hover plane effect"
Bootstrap 4.0.0 Snippet by Siddharth Panchal

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>3D Hover Plane Efect</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="card">
<div class="card-content">
<h1 class="text-white text-shadow">Just hover around</h1>
<p class="text-shadow"><small><span class="text-white">by:</span> <a href="#">Siddharth Panchal</a></small></p>
<p class="related text-white text-shadow"><strong>See also: </strong><a href="https://codepen.io/ariona/details/LVZLGP/" target="_blank">Staged dropdown animation</a></p>
</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700);
body{background: #edf2f4;perspective: 1000px;transform-style: preserve-3d;display: flex;height: 100vh;font-family: "Playfair Display",georgia,serif;}
.text-white{color: #fff;}
.text-shadow{text-shadow:1px 1px 1px #000;}
.card{pointer-events: none;transform: translateZ(0);padding: 30px;background: url(http://unsplash.it/600/400?image=89);border-radius: 5px;width: 400px;height: 200px;margin: auto;transform-style: preserve-3d;backface-visibility: hidden;display: flex;box-shadow: 0 0 5px rgba(0,0,0,.1);position: relative;}
.card:after{content:" ";position: absolute;width: 100%;height: 10px;border-radius: 50%;left:0;bottom:-50px;box-shadow: 0 30px 20px rgba(0,0,0,.3);}
.card-content{margin: auto;text-align:center;transform-style: preserve-3d;}
h1{transform: translateZ(100px);}
p{transform: translateZ(50px);display: block;}
card.related{transform: translateZ(80px);font-style: italic;}
a{color:#69c6b8;pointer-events: auto;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
$(document).ready(function(){
var card = $(".card");
$(document).on("mousemove",function(e) {
var ax = -($(window).innerWidth()/2- e.pageX)/20;
var ay = ($(window).innerHeight()/2- e.pageY)/10;
card.attr("style", "transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-webkit-transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-moz-transform: rotateY("+ax+"deg) rotateX("+ay+"deg)");
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

awesome...

Shreyas441 () - 5 years ago - Reply 0