How to create Rotate profile card using html and css
<!DOCTYPE html>
<html>
<head>
<title>Rotated Profile card</title>
<style type="text/css">
.profile-card{
width: 300px;
height: 300px;
perspective: 1000px;
}
.profile-card-inner{
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.5s;
transform-style: preserve-3d;
}
.profile-card:hover .profile-card-inner{
transform: rotateY(180deg);
}
.profile-card-front, .profile-card-back{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.profile-card-front{
background-color: gray;
color: #fff;
}
.profile-card-back{
background-color: blue;
color: #fff;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="profile-card">
<div class="profile-card-inner">
<div class="profile-card-front">
<img src="profile.png" style="width: 300px;height: 300px;">
</div>
<div class="profile-card-back">
<h3>S M Durjoy</h3>
<h4>BSc in CSE</h4>
<h4>ADUST</h4>
</div>
</div>
</div>
</body>
</html>
For To-Let: www.basabaribd.com
No comments