source code :===>
<html dir="ltr" lang="en"></html>
<head>
<meta charset="utf-8"></meta>
<title>3D Flip Card on Hover | Web Developer Joy</title>
<link href="style.css" rel="stylesheet"></link>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<style>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
width: 100%;
place-items: center;
background: linear-gradient(375deg, #1cc7d0, #2ede98);
}
::selection{
color: #fff;
background: #1cc7d0;
}
.wrapper{
height: 400px;
width: 320px;
position: relative;
transform-style: preserve-3d;
perspective: 1000px;
}
.wrapper .card{
position: absolute;
height: 100%;
width: 100%;
padding: 5px;
background: #fff;
border-radius: 10px;
transform: translateY(0deg);
backface-visibility: hidden;
transform-style: preserve-3d;
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
transition: transform 0.7s cubic-bezier(0.4,0.2,0.2,1);
}
.wrapper:hover > .front-face{
transform: rotateY(-180deg);
}
.wrapper .card img{
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 10px;
}
.wrapper .back-face{
display: flex;
align-items: center;
justify-content: space-evenly;
flex-direction: column;
transform: rotateY(180deg);
}
.wrapper:hover > .back-face{
transform: rotateY(0deg);
}
.wrapper .back-face img{
height: 150px;
width: 150px;
padding: 5px;
border-radius: 50%;
background: linear-gradient(375deg, #1cc7d0, #2ede98);
}
.wrapper .back-face .info{
text-align: center;
}
.back-face .info .title{
font-size: 30px;
font-weight: 500;
}
.back-face ul{
display: flex;
}
.back-face ul a{
display: block;
height: 40px;
width: 40px;
color: #fff;
text-align: center;
margin: 0 5px;
line-height: 38px;
border: 2px solid transparent;
border-radius: 50%;
background: linear-gradient(375deg, #1cc7d0, #2ede98);
transition: all 0.5s ease;
}
.back-face ul a:hover{
color: #1cc7d0;
border-color: #1cc7d0;
background: linear-gradient(375deg, transparent, transparent);
}
</style>
<body>
<center>
<div class="wrapper">
<div class="card front-face">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdGIt84U3GMWhY84kbcxHOHncyQdwuLTJRkcnppNePk1mW6AIC09Hl4lrwdRwBjV127FLYViuJtb8lJZFjCE36FF0QAuGnaTIcQa7Ip69YyVNr5WWPkKTgfEweYhPPiqb-rY5nNIy8UHg/s500/logo.jpeg" />
</div>
<div class="card back-face">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdGIt84U3GMWhY84kbcxHOHncyQdwuLTJRkcnppNePk1mW6AIC09Hl4lrwdRwBjV127FLYViuJtb8lJZFjCE36FF0QAuGnaTIcQa7Ip69YyVNr5WWPkKTgfEweYhPPiqb-rY5nNIy8UHg/s500/logo.jpeg" />
<div class="info">
<div class="title">Web Developer Joy</div>
<p>User interface designer and <br />front-end developer</p>
</div>
<ul>
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</ul>
</div>
</div>
</center>
</body>
No comments