3D Hover Plane Effect Jquery
generating preview
<html>
<head>
<style>
@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;
}
.card{
pointer-events: none;
transform: translateZ(0);
padding: 30px;
background: white;
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;
&: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;
&.related{
transform: translateZ(80px);
font-style: italic;
}
}
a{
color:#69c6b8;
pointer-events: auto;
}
}
.iklan{
position: fixed;
bottom: 0;
right: 0;
background: white;
width: 200px;
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
p{
margin: 0 0 15px;
line-height: 1.4;
}
a{
background-color: #ff4757;
color: white;
display: inline-block;
padding: 10px 20px;
border-radius: 3px;
text-decoration: none;
font-size: 14px;
}
}
</style>
</head>
<body>
<div class="card">
<div class="card-content">
<h1> Visit Designer Desk Online </h1>
<p class="related"><strong> For More Updates </strong></p>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'> </script>
<script>
// why it doesn't work on firefox?
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)");
});
</script>
</body>
</html>
How to Use this Elements / Source Code:
You Can Use 3D Hover Plane Effect Jquery elements by select the above source code (CTRL + A) then copy the code (CTRL + C) and paste (CTRL + V) it in a blank html Page to initially test it. Then you can use the Above 3D Hover Plane Effect Jquery where ever you want for your project.
Usage of 3D Hover Plane Effect Jquery:
Here we show you how to create 3D Hover Plane Effect Jquery to inprove your design improvements.3D effects & Shadow is a trend Now. So Use it in your website design.