
Demo:
To create the CSS 3d flip Business Card follow the steps below and watch the video tutorial:
- Add HTML
- Add CSS
Step1.
Add HTML
Create the card container, front, and back-side of the business card:
<div class="business-card">
<div class="business-card-inner">
<div class="business-card-front">
<div class="laptop">
<div class="keyboard">
<div class="logo-text">Web Developer</div>
</div>
</div>
</div>
<div class="business-card-back">
<div class="logo-left-side">
<div class="text">Web Developer</div>
<div class="mail">📧 example@gmail.com</div>
</div>
</div>
</div>
</div>
Step2.
Add CSS
Set the colour and position of the background and elements:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #e5e5e5;
}
.business-card {
background-color: transparent;
width: 300px;
height: 200px;
perspective: 1000px;
cursor: pointer;
}
Make the card flippable:
.business-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.5s;
transform-style: preserve-3d;
box-shadow: 0 4px 20px rgba(0,0,0,0.2), 10px 18px 20px rgba(0,0,0,0.2);
}
.business-card:hover .business-card-inner {
transform: rotateY(180deg);
}
.business-card-front, .business-card-back {
position: absolute;
background-color: #0a9396;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.business-card-back {
transform: rotateY(180deg);
}
Style the front side of the card:
.laptop {
position: relative;
width:65px;
height:50px;
border: 3px solid #333;
top:-45px;
}
.laptop:before {
content:"jd";
color: #333;
font-size: 30px;
position: absolute;
background-color: #e9d8a6;
width:50px;
height:35px;
border: 3px solid #333;
left:4.4px;
top:4.4px;
}
.laptop:after {
position: absolute;
content:"";
width:6px;
height:4px;
background-color: #0a9396;
top:3.5px;
left:40px;
box-shadow: -45px 42.5px #0a9396, 23px -3.5px #0a9396;
}
.keyboard {
position: relative;
perspective: 200px;
width: 20px;
height:3px;
background-color: #333;
top:67px;
left:22px;
}
.keyboard:before {
position: absolute;
content:"";
border: 3.5px solid #333;
width:72px;
height: 25px;
transform: rotateX(60deg);
top:-17px;
left:-28px;
}
.keyboard:after {
content:"www.example.co.uk";
position: absolute;
font-family: tahoma;
color: #333;
top:65px;
left:-62px;
}
.logo-text {
color: #333;
font-family: tahoma;
width:150px;
position: relative;
top:12px;
font-size:19px;
left:-65px;
}
.logo-text:before {
content:"John Doe";
position: absolute;
top:22px;
font-size:16px;
font-weight: bold;
width:150px;
left:0;
}

Style the backside of the card:
.logo-left-side {
position: relative;
background-color: #333;
width:2px;
height:130px;
}
.logo-left-side:before {
content:"jd";
color: #333;
font-size: 50px;
position: absolute;
left:-50px;
}
.logo-left-side:after {
content:"John Doe";
color: #333;
font-size:20px;
font-weight: bold;
font-family: tahoma;
left:-107px;
position: absolute;
width:100px;
top:60px;
}
.text {
position: relative;
color: #333;
font-family: tahoma;
width:120px;
left:-124px;
top:90px;
}
.text:before {
content:"☎ Phone: 123456789";
position: absolute;
left:110px;
top:-85px;
font-size:11px;
width:150px;
}
.text:after {
content:"🏢 Address: Oxford Street 123, London, United Kingdom";
color: #333;
left:130px;
top:-60px;
position: absolute;
width:100px;
font-size:11px;
}
.mail {
position: relative;
font-size: 11px;
color: #333;
font-family: tahoma;
top:65px;
width:150px;
left:-7.5px;
}
.mail:before {
content:"🌐 www.example.co.uk";
color: #333;
font-size:11px;
font-family: tahoma;
top:25px;
position: absolute;
}

Watch also the video tutorial:
Enjoy coding!
Read also:
HTML & CSS Folded Birthday Card