Flipping card using html and css

In this article, we given a Flipping card using html and css with complete source code to add on website or project. Try this project in your vs code to check how it works. We created a simple and basic Flipping card using html and css. Let's go and check the source code.

To add this project in vs code, follow the given process :-

1) Create a New folder in file manager name as - Flipping-card.

2) Open the folder in VS code.

3) Add file name as - index.html and copy the html code as given.

4) Add another file name as - style.css and copy the css code as given.

5) Then run the code or check the preview with code preview extension in vs code.

Flipping card using html and css source code

Here we given a html and css source code of flipping card as given -

HTML

In HTML, we created a structure in div tag by providing front and back side information. We given a class name to the front and back side card in div tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flipping card using html and css</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card-container">
        <div class="card">
          <div class="front">
            <div class="profile-info">
              <h2>Codi boy</h2>
              <p><b>Web developer</b></p>
            </div>
          </div>
          <div class="back">
            <div class="skills">
              <h3>MY Skills</h3>
              <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
              </ul>
            </div>
          </div>
        </div>
      </div> 
</body>
</html>

CSS

In CSS, we given a position and color to the card. We given a rotate property on card hover to flipp the card with smoothly.

.card-container {
    perspective: 1000px;
    margin: 20px;
    display: flex;
    justify-content: center;
  }
  
  .card {
    width: 300px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s;
  }
  
  .card:hover {
    transform: rotateY(180deg);
  }
  
  .front,
  .back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    border-radius: 10px;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.8s;
  }
  
  .front {
    background-image:linear-gradient(to right, hsl(263, 100%, 51%), #ff0000);
    background-size: cover;
    color: white;
  }
  
  .back {
    transform: rotateY(180deg);
    background-color: #f0f0f0;
    background-image:linear-gradient(to right, hsl(263, 100%, 51%), #ff0000);
    background-size: cover;
    color:white;
  }
  
  .profile-info {
    text-align: center;
  }
  
  .skills {
    text-align: center;
  }
  
  .skills ul {
    list-style-type: none;
    padding: 0;
  }
  
  .skills ul li {
    margin-bottom: 5px;
  }

Output

Check this output of flipping card -

Also see this -

Expandable cards using html and css

Hope this tutorial will help you to use Flipping card using html and css with source code. if you have any confusion or query then you can contact us on our coding community.

Checkout more projects on our website and join our coding community on telegram to get more knowledge about coding.

Flipping card using html and css

Flipping card using html and css source code

HTML

CSS

Output

Contact Form