Flipping Card effect using HTML and CSS

​Here is simple code using HTML and Css to show flipping card effects.

  • Below screenshots shows the output of the card effect.

​

  • Second screenshot

​

  • HTML code (save the file extension of .html)
<html>
    <head>
        <title>Flipping card</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="flip.css">
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>
        <div class="title">
            <h1>Flip Card</h1>
            <p>iphone 11pro new</p>
        
        </div>
        <div class="flip-card">
            <div class="flip-card-inner">
                <div class="flip-card-front">
                    <img src="image/phone1.jpg">   
                    
                </div>
                <div class="flip-card-back">
                    <div class="back-header">
                        <img src="image/small img.jpg">
                    </div>
                    <div class="back-footer">
                        <h2> iphone 11pro</h2>
                        <p> 6.1-inch (15.5 cm) Liquid Retina HD LCD display dust resistant (</p>
                        <p><i class="fa fa-inr"></i>29,000</p>
                        <div>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star-half-o"></i>
                        </div>
                        <a href="#">Wishlist</a>
                        <a href="#">Add to cart</a>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
  • CSS code (save the file as a card.css because we have linked the CSS file with the Html page so if you save the CSS file with any other name then make sure you change the HTML link in the header as well)

*
{
    font-family: sans-serif;
}
.title{
    text-align: center;
    margin: 40px auto 30px;
}
.flip-card{
    width: 350px;
    height: 430px;
    margin: auto;
}
.flip-card-back{
    background-color: orangered; 
    color: black;
   transform: rotateY(180deg);
    z-index: 1;    
}
.flip-card-back .back-header{
    height: 45%;
    text-align: center;
}
.flip-card-back .back-header img{
    width: 130 ;
    margin-top: 80px;
}
.flip-card-inner{
    position: relative;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}
.flip-card-back, .flip-card-front{
    position: absolute;
    width: 100%;
    height: 110%;
    backface-visibility: hidden;
}
.flip-card:hover .flip-card-inner{
    transform: rotateY(180deg);
}
.flip-card .back-footer{
    height: 55%;
    padding: 0 15px;
}
.back-footer a{
    text-decoration: none;
    width: 120px;
    display: inline-block;
    text-align: center;
    padding: 7px 5px;
    border: 1px solid white;
    color: #fff;
    margin-top: 30px;
    transition: 0.5s;
    
}
.back-footer a:hover{
    background: black;
    border: 1px solid black;
}

Posted on by
Score
Views