3D Flip Card

Home / Web Code Snippet / 3D Flip Card

3D Flip Card

https://youtube.com/shorts/YsUSQeQKFz0?si=xXiXx5TggB8U39wF

HTML CODE:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title></title>
</head>
<body>
    <div class="container">
        <div class="card card1">
            <i class="fa-solid fa-laptop-file"></i>
            <h2>Web Development</h2>
        </div>
        <div class="card card2">
            <p>With our hands-on approach and real-world projects, you'll gain practical experience that you can apply immediately. In Modern Life Use of Websites and Mobile Applications is Increasing and IT Companies Needs those Person who Builds websites/Applications</p>
        </div>
    </div>
</body>
</html>

CSS CODE:-

body{
            padding: 0px;
            margin: 0px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background: black;
        }
        .container{
            position: relative;
            width: 250px;
            height: 200px;
        }
        .card{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 10px;
            transition: 0.5s;
        }
        .card1{
            background: #333;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            transform-origin: bottom;
            z-index: 1;
        }
        .card1 i{
            font-size: 100px;
        }
        .container:hover .card.card1{
            transform: translateY(-100%) rotateX(90deg);
            background: blueviolet;
        }
        .card2{
            background: white;
            display: flex;
            justify-content: center;
            align-items: center;
            transform-origin: top;
            transition: 0.5s;
            transform: translateY(100%) rotateX(90deg);
        }
        p{
            padding: 0 10px;
        }
        .container:hover .card.card2{
            transform: translateY(0%) rotateX(0deg);
        }