Create 3D Flip Effect section

Hello Friends,

Today in this blog you’ll learn how to create 3D Flip Effect section. Previously I have shared a How to create robotics theme with animated cursor? now it’s time to create a 3D Flip Effect using HTML,CSS.

In that tutorial you have seen 3D flip effect section. I used the CSS for styling the flip effect section.

If you’re a beginner, you can also create this types of 3D flip effect and good them according to your choice because there are no vast codes of CSS.

If you like this program (Custom Design) and want to get source code. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

See also  Triangular List Bullets Using CSS


If you need the same background images and icons on your website you can Download Image.

<!DOCTYPE html>
<!-- code by CodeitHub ( https://CodeitHub.com ) -->
<html>
    <head>
        <title>3D Team </title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>
        <div class="container">
            <h1>OUR TEAM</h1>
            <div class="row">
                <div class="col">
                    <div class="card">
                        <div class="inner-box">
                            <div class="card-front front1">
                                <span>Priya</span>
                            </div>
                            <div class="card-back">
                                <p>Co-Faounder & CEO</p>
                                <div class="social-media">
                                    <a href="#"><img src="./facebook.png"></a>
                                    <a href="#"><img src="./instagram.png"></a>
                                    <a href="#"><img src="twitter.png"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <div class="inner-box">
                            <div class="card-front front2">
                                <span>Shreya</span>
                            </div>
                            <div class="card-back">
                                <p>Manager </p>
                                <div class="social-media">
                                    <a href="#"><img src="./facebook.png"></a>
                                    <a href="#"><img src="./instagram.png"></a>
                                    <a href="#"><img src="twitter.png"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <div class="inner-box">
                            <div class="card-front front3">
                                <span>Anushka</span>
                            </div>
                            <div class="card-back">
                                <p>Team Lead</p>
                                <div class="social-media">
                                    <a href="#"><img src="./facebook.png"></a>
                                    <a href="#"><img src="./instagram.png"></a>
                                    <a href="#"><img src="twitter.png"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <section id="footer">
        <div class="container text-center">
            <p>Made By <i class="fa fa-heart-o"></i>Codeithub.com</p>
          </div>
          </section>
    </body>
</html>
/** code by CodeitHub ( https://CodeitHub.com ) **/
*{
    margin:0px;
    padding:0px;
}
.container{
    width:100%;
    height:100%;
}
h1{
    color:#444;
    text-align: center;
    margin:100px auto 50px;
    font-family: sans-serif;
}
.row{
    width:85%;
    margin:auto;
    display:flex;
    align-items: center;
    justify-content: space-between;
}
.col{
    flex-basis: 30%;
    overflow:hidden;
}
.card{
    width:350px;
    height: 350px;
    margin:auto;
    perspective:1000px;
    cursor: pointer;
}
.inner-box{
    position: relative;
    width:100%;
    height:100%;
    text-align: center;
    border-radius: 10px;
    transition: transform 1s;
    transform-style: preserve-3d;
}
.card-front, .card-back{
    position: absolute;
    width:100%;
    height:100%;
    backface-visibility: hidden;
    border-radius: 10px;
}
.card-front{
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url("./p1.jpg");
    background-position: center;
    background-size: cover;
}
front1{
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url("./p1.jpg");
}
.front2{
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url("./p2.jpeg");
}
.front3{
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url("./p3.jpeg");
}
.card-front span{
   display:inline-block;
    width:100px;
    padding:14px 0;
    margin-top:160px;
    border-radius:4px;
    background:#fff;
    color:#333;
    transition:transform 1s;
}
.card-back{
    background:#1c1f54;
    transform:rotateX(180deg);
}
.card:hover .inner-box{
    transform:rotateX(-180deg);
}
.card:hover span{
    transform:translateY(140px);

}
p{
    display:inline-block;
    color:#fff;
    padding-bottom: 10px;
    border-bottom:1px solid #fff;
    margin-top:140px;
}
.social-media img{
    width: 30px;
    margin:10px 5px;
}
#footer{
    background:#333;
    color:black;
    padding:12px;
    margin-top:50px;
    text-align: center;
}
.fa-heart-o{
    margin:3px;
    color:red;
}

Output

Leave a Reply

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