By using this site, you agree to the Privacy Policy and Terms of Use.
Accept
rocoderesrocoderes
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Notification Show More
Latest News
How to set the dropdown value by clicking on a table row
Javascript – How to set the dropdown value by clicking on a table row
JavaScript
Attempting to increase the counter, when the object's tag exist
Javascript – Attempting to increase the counter, when the object’s tag exist
JavaScript
Cycle2 JS center active slide
Javascript – Cycle2 JS center active slide
JavaScript
Can import all THREE.js post processing modules as ES6 modules except OutputPass
Javascript – Can import all THREE.js post processing modules as ES6 modules except OutputPass
JavaScript
How to return closest match for an array in Google Sheets Appscript
Javascript – How to return closest match for an array in Google Sheets Appscript
JavaScript
Aa
Aa
rocoderesrocoderes
Search
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Follow US
High Quality Design Resources for Free.
rocoderes > HTML & CSS > How To Make Responsive Services Box With Flip Animation
HTML & CSSUncategorized

How To Make Responsive Services Box With Flip Animation

Admin
Last updated: 2022/11/30 at 5:22 AM
Admin
Share
10 Min Read
Services Box With Flip Animation

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.

Contents
Pre-requisites of Responsive Services Box With Flip Animation Using Only HTML & CSSCreating HTML MarkupSetting Default ValuesSetting up Front Face in CardStyling Icons Setting up Back Face In The CardFull Source Code of Responsive Services Box With Flip Animation Using Only HTML & CSSindex.htmlstyle.cssOutputYou may also like:

Pre-requisites of Responsive Services Box With Flip Animation Using Only HTML & CSS

  • Good knowledge of HTML.
  • Good knowledge of CSS and CSS animations.
View Demo

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.

Services Box With Flip Animation

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.

Services Box With Flip Animation

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.

Services Box With Flip Animation

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

Services Box With Flip Animation
Services Box With Flip Animation
View Demo
Download Code

You may also like:

  • How To Make Number Guessing Game JavaScript
  • Build a Simple Number Memorising Game In JavaScript
  • Build a Simple Digital Clock In JavaScript

Related

Subscribe to Our Newsletter

Subscribe to our newsletter to get our newest articles instantly!

TAGGED: Services Box With Flip Animation
Share this Article
Facebook Twitter Email Print
What do you think?
Love0
Sad0
Happy0
Sleepy0
Angry0
Dead0
Wink0
Posted by Admin
Follow:
Rocoderes is a blog you can learn HTML, CSS, JavaScript, React Js and Python along with creative coding stuff and free source code files.
Previous Article 3D pop up card HOW TO MAKE 3D POP UP CARD USING CSS ANIMATION
Next Article Slide Puzzle Game in HTML CSS and JavaScript How To Make Slide Puzzle Game in JavaScript
Leave a comment Leave a comment

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

- Advertisement -

You Might Also Like

Searching an Array For a Value

In JavaScript, Searching an Array For a Value

January 23, 2023
Price Range Slider

How to Make Price Range Slider Using JavaScript

December 8, 2022
save text as File in HTML

How to Save Text as File in JavaScript

December 5, 2022
Calendar in HTML

How to Make Dynamic Calendar in HTML & JavaScript

December 5, 2022
rocoderesrocoderes
Follow US

Copyright © 2022 All Right Reserved By Rocoderes

  • Home
  • About us
  • Contact us
  • Disclaimer
Join Us!

Subscribe to our newsletter and never miss our latest news, podcasts etc.

Zero spam, Unsubscribe at any time.
Welcome Back!

Sign in to your account

Lost your password?