In this article, we will Create Responsive Services Box with Flip Animation using only HTML & CSS, This project has three sections and if we hover on them then it will give some animation with flipping box, and it looks cool.
Pre-requisites of Responsive Services Box With Flip Animation Using Only HTML & CSS
- Good knowledge of HTML.
- Good knowledge of CSS and CSS animations.
Creating HTML Markup
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="wrapper">
<div class="box">
<div class="front-face">
<div class="icon">
<i class="fas fa-code"></i>
</div>
<span>Web Design</span>
</div>
<div class="back-face">
<span>Web Design</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem in deleniti vitae beatae veritatis aliquid porro perspiciatis dolores impedit ad.
</p>
</div>
</div>
<div class="box">
<div class="front-face">
<div class="icon">
<i class="fas fa-chart-line"></i>
</div>
<span>Advertising</span>
</div>
<div class="back-face">
<span>Advertising</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem in deleniti vitae beatae veritatis aliquid porro perspiciatis dolores impedit ad.
</p>
</div>
</div>
<div class="box">
<div class="front-face">
<div class="icon">
<i class="fas fa-rocket"></i>
</div>
<span>Game Design</span>
</div>
<div class="back-face">
<span>Game Design</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem in deleniti vitae beatae veritatis aliquid porro perspiciatis dolores impedit ad.
</p>
</div>
</div>
</div>
</body>First of all, we need to import font awesome, so this will allow us to use icons and this will require the active internet connection. In this we will import code icon then we need a paragraph with a span tag, now we will copy and paste the these lines of code and paste it two times, also we’ll change icon chart-line for second section and rocket icon for third section. We have here Icons with front-face class and paragraph with back-face class, we want here icon in front by default, and we want paragraph to be shown when we hover it.
Setting Default Values
@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;
}
body{
height: 100%;
width: 100%;
text-align: center;
background: #f2f2f2;
}
.wrapper{
display: grid;
margin: 200px 90px auto;
grid-gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}Now, In CSS part we need here google font named Poppins, and we will use it throughout this project, then we will reset default values, and also we’ll add font-family, then after we will set height and width to 100% also we place our body content’s text in center, also background will be a color #f2f2f2.
Now display we will add as grid, so our sections will be set horizontally, also we have provided some margin from top and left. Now, we will provide some gave between section of let’s say 20px. Now we have to form cards for that we used grid-template-columns.
Setting up Front Face in Card
.wrapper .box{
width: 350px;
margin: 0 auto;
position: relative;
perspective: 1000px;
}
.wrapper .box .front-face{
background: #fff;
height: 220px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1);
transition: all 0.5s ease;
}Now we need to form a box, or you can say card for that we need width of 350px and position will be relative so that this cards won’t get stick to page and while providing flip effect then absolute position won’t allow it. Then we added here perspective of 1000px, this property used to give 3D positioning.
Now, in card we need white background also with some width and height, here we used flex-direction, so with these icons and text will get set into columnwise or vertically. After that we will add some shadow around the icons and text also we need some transition for 0.5 seconds of ease type.
Styling Icons
.box .front-face .icon{
height: 80px;
}
.box .front-face .icon i{
font-size: 65px;
}
.box .front-face span,
.box .back-face span{
font-size: 22px;
font-weight: 600;
text-transform: uppercase;
}
.box .front-face .icon i,
.box .front-face span{
background: linear-gradient(-135deg, #c850c0, #4158d0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}Let’s increase the height of the icon area by 80px, then let’s make icons of 65px, in case of background color for icon and text we will give gradient color #c850c0 and #4158d0 at -135 degrees, so we need this gradient color in text and in icon for that we will use -webkit-background-clip to text and -webkit-text-fill-color to transparent.
Setting up Back Face In The Card
.box .back-face{
position: absolute;
top: 0;
left: 0;
z-index: 1;
height: 220px;
width: 100%;
padding: 30px;
color: #fff;
opacity: 0;
transform-style: preserve-3d;
background: linear-gradient(-135deg, #c850c0, #4158d0);
transform: translateY(110px) rotateX(-90deg);
box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1);
transition: all 0.5s ease;
}
.box .back-face p{
margin-top: 10px;
text-align: justify;
}
.box:hover .back-face{
opacity: 1;
transform: rotateX(0deg);
}
.box:hover .front-face{
opacity: 0;
transform: translateY(-110px) rotateX(90deg);
}Now, for back-face we need to add position to absolute so that content will be behind of front-face, then z-index will be 1 so that if we this content comes over then content will overlap. After height, width and padding will be same as front-face, also here we added opacity to 0, so content won’t show up, then we have here preserve-3d transform style this property specifies back-face content will contain 3D effect. Also, we will transform it in Y-axis with 110px and in X-axis we will rotate to -90 degrees.
Now, in hover effect change opacity to 1 and rotate from X-axis to 0 degrees so the back-face comes in front, and then we also need to rotate front-face by 90 degrees in x-axis and translate Y to -110px, so the front face will be invisible completely.
Full Source Code of Responsive Services Box With Flip Animation Using Only HTML & CSS
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Responsive Services Box | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<div class="box">
<div class="front-face">
<div class="icon">
<i class="fas fa-code"></i>
</div>
<span>Web Design</span>
</div>
<div class="back-face">
<span>Web Design</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem in deleniti vitae beatae veritatis aliquid porro perspiciatis dolores impedit ad.
</p>
</div>
</div>
<div class="box">
<div class="front-face">
<div class="icon">
<i class="fas fa-chart-line"></i>
</div>
<span>Advertising</span>
</div>
<div class="back-face">
<span>Advertising</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem in deleniti vitae beatae veritatis aliquid porro perspiciatis dolores impedit ad.
</p>
</div>
</div>
<div class="box">
<div class="front-face">
<div class="icon">
<i class="fas fa-rocket"></i>
</div>
<span>Game Design</span>
</div>
<div class="back-face">
<span>Game Design</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem in deleniti vitae beatae veritatis aliquid porro perspiciatis dolores impedit ad.
</p>
</div>
</div>
</div>
</body>
</html>style.css
@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;
}
body{
height: 100%;
width: 100%;
text-align: center;
background: #f2f2f2;
}
.wrapper{
display: grid;
margin: 200px 90px auto;
grid-gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}
/*
@media (max-width: 700px) {
.wrapper{
margin: 200px auto;
}
}*/
.wrapper .box{
width: 350px;
margin: 0 auto;
position: relative;
perspective: 1000px;
}
.wrapper .box .front-face{
background: #fff;
height: 220px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1);
transition: all 0.5s ease;
}
.box .front-face .icon{
height: 80px;
}
.box .front-face .icon i{
font-size: 65px;
}
.box .front-face span,
.box .back-face span{
font-size: 22px;
font-weight: 600;
text-transform: uppercase;
}
.box .front-face .icon i,
.box .front-face span{
background: linear-gradient(-135deg, #c850c0, #4158d0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.box .back-face{
position: absolute;
top: 0;
left: 0;
z-index: 1;
height: 220px;
width: 100%;
padding: 30px;
color: #fff;
opacity: 0;
transform-style: preserve-3d;
backface-visibility: hidden;
background: linear-gradient(-135deg, #c850c0, #4158d0);
transform: translateY(110px) rotateX(-90deg);
box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1);
transition: all 0.5s ease;
}
.box .back-face p{
margin-top: 10px;
text-align: justify;
}
.box:hover .back-face{
opacity: 1;
transform: rotateX(0deg);
}
.box:hover .front-face{
opacity: 0;
transform: translateY(-110px) rotateX(90deg);
}Output
