3D Card Effects with HTML and CSS @rayen-code

Rayen

3D card effects are a captivating way to showcase content on your website. In this tutorial, we'll teach you how to design impressive 3D card effects using HTML and CSS. Elevate your web design skills and make your web content pop with this eye-catching design element.




Step 1: HTML Markup:

Set up the HTML structure for your 3D card effect, defining the card and its content.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Card Depth Effect</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  
    <link rel="stylesheet" href="style.css">
</head>
<body>

        <div class="container-fluid">
            <h1 class="heading">3D Card Depth Effect</h1>
            <div class="row">

                <!-- card one -->
                <div class="card col-auto">
                    <div class="front item-a">
                        <h1>Watch</h1>
                        <div class="card-back">
                            <a href="#">Show More.</a>
                        </div>
                    </div>
                </div>

                <!-- card two  -->
                <div class="card col-auto">
                    <div class="front item-b">
                        <h1>Headphone</h1>
                        <div class="card-back">
                            <a href="#">Show More.</a>
                        </div>
                    </div>
                </div>

                <!-- card three  -->
                <div class="card col-auto">
                    <div class="front item-c">
                        <h1>HandBag</h1>
                        <div class="card-back">
                            <a href="#">Show More.</a>
                        </div>
                    </div>
                </div>



            </div>
        </div>



    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
 
</body>
</html>

Step 2: Styling with CSS:

Create a separate CSS file (style.css) 
/*-------------------- CSS --------------------*/
body {
    font-family: sans-serif;
    background: linear-gradient(50deg, #17572d, #233e5d);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.heading{
    position: absolute;
    top: 120px;
    font-size: 80px;
    width: 100%;
    color: white;
    text-align: center;
}

.row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 80px;
}

.card {
    position: relative;
    width: 300px;
    height: 400px;
    background: transparent;
    perspective: 1100px;
    padding: 0;
    border: 0;
}
.card:hover .front{
    transform: rotateY(-180deg);
}

.front {
    position: relative;
    height: 100%;
    width: 100%;
    color: white;
    border-radius: 10px;
    transform-style: preserve-3d;
    transition: 2s;
    background: center no-repeat;
    background-size: cover;
    transform: rotateY(0deg);
    z-index: 1;
}

.item-a {
    background-image: url(img1.jfif);
}
.item-b {
    background-image: url(img2.jfif);
}
.item-c {
    background-image: url(img3.jfif);
}

.front::before {
    content: "";
    position: absolute;
    transform-style: preserve-3d;
    border: 3px double white;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    transform: translateZ(20px);
}

.front h1 {
    position: absolute;
    font-size: 2rem;
    text-shadow: 0 0 10px black;
    bottom: 10px;
    left: 20px;
    transform-style: preserve-3d;
    transform: translateZ(20px);
}

.card-back {
    background: #233e5db7;
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 10px;
    transform-style: preserve-3d;
    transform: rotateY(180deg);
    display: flex;
    justify-content: center;
    align-items: center;
   backface-visibility: hidden;
}
.card-back a{
    background: #17572d;
    color: white;
    padding: 10px 25px;
    border-radius: 25px;
    text-decoration: none;
    transform-style: preserve-3d;
    transform: translateZ(40px);
    transition: 0.2s;
}
.card-back a:hover{
    background:  white;
    color:#17572d;
}

Customize your 3D card effect by adding your own content, colors, and images. This dynamic design element is perfect for highlighting featured content on your website.

0 Comments