Hy Guys, today we are going to create a card with mouse movement tracking effect. We will use fonts from fontawesome.com. In the style we will use gradient for card and translate property of transform to give text 3d look.
What is preserve-3d?
The transform-style property specifies how nested elements are rendered in 3D space.
preserve-3d. Specifies that child elements will preserve its 3D position. initial. Sets this property to its default value.
Note: This property must be used together with the transform property.
transform-style: preserve-3d;
What is translateZ()?
The translateZ() CSS function repositions an element along the z-axis in 3D space, i.e., closer to or farther away from the viewer.
transform: translateZ(0px);
transform: translateZ(100px);
Create three files index.html , style.css & script.js and paste the given code.
Here is the Code
index.html
<!DOCTYPE html>
<head>
<title>3D Card Hover Effect</title>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='card'>
<div class="card-content">
<h3>CodeDesignerWorld</h3>
<p>Web & App Developer</p>
<a href="https://www.instagram.com/codedesignerworld">
<i class="fab fa-instagram"></i><i class="instaAdd">@codedesignerworld<i>
</a>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
style.css
body {
transform-style: preserve-3d;
perspective: 1000px;
height: 100vh;
color: #333;
font-family: "Roboto", sans-serif;
display: flex;
justify-content: center;
overflow: hidden;
align-items: center;
background: radial-gradient(#333, #000);
}
i{
display: inline-flex;
vertical-align: middle;
}
.fab{
font-size: 20px;
color: white;
margin-top: 0px;
}
a{
text-decoration: none;
}
.instaAdd{
font-size: 15px;
margin-left: 5px;
color: white;
}
.card {
width: 400px;
height: 200px;
position: relative;
background: linear-gradient(to right, #DD4929, #FF416C);
border-radius: 3px;
background-position: top center;
transform-style: preserve-3d;
display: flex;
border-radius: 40px;
justify-content: center;
align-items: center;
}
.card:after {
content: "";
position: absolute;
width: 100%;
height: 8px;
border-radius: 50%;
left: 0;
bottom: 0px;
box-shadow: 0 30px 20px rgba(0, 0, 0, 0.3);
}
.card-content {
transform-style: preserve-3d;
text-align: center;
}
.card-content h3 {
color: #FFF;
transform: translateZ(100px);
}
.card-content p {
color: #FFF;
transform: translateZ(50px);
}
script.js
let card = document.querySelector('.card');
document.addEventListener('mousemove', function(e) {
let xAxis = (window.innerWidth / 2 - e.pageX) / 10;
let yAxis = (window.innerHeight / 2 - e.pageY) / 5;
card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
});
Hope You Like this post
Code is also available on Github Click Here!
Thank You
Comments
Post a Comment