Creating an Impressive 3D Product Preview Card with HTML and CSS

Rayen

When showcasing products on your website, the presentation matters. In this tutorial, we'll guide you through creating an eye-catching 3D product preview card using HTML and CSS. Elevate your web design skills and provide your audience with an interactive and engaging way to explore your products.




Step 1: HTML Markup:

Start by setting up the HTML structure for your 3D product preview card, 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>Product Preview</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="wrapper">
        <div class="card">
            <div class="frontface">
                <div class="shadow"></div>
                <h1>BRAND NAME</h1>
            </div>
            <div class="backface">
                <div class="shadow"></div>
                <h2>BRAND NAME</h2>
                <div>Sizes:</div>
                <div class="size">
                    <span>7</span>
                    <span>8</span>
                    <span>9</span>
                    <span>10</span>
                </div>
            </div>
        </div>

        <div class="imgWrapper">
            <img src="img (2).png" alt="">
        </div>
    </div>
    
</body>
</html>

Step 2: Styling with CSS:

Create a separate CSS file (style.css) 
/*-------------------- CSS --------------------*/
*{
    box-sizing: border-box;
    margin: 0;padding: 0;
    font-family: sans-serif;
}
body{
    min-height: 100vh;
    background: linear-gradient(45deg, #008051, #00ffcc);
    display: flex;
    align-items: center;
    justify-content: center;
}
.wrapper{
    width: 410px;
    height: 570px;
    
    perspective: 800px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.card{
    width: 320px;
    height: 450px;
    position: relative;
    transform-style: preserve-3d;
    transition: 0.3s;
    color: white;
}
.card > div{
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 40px 20px;
    transform-style: preserve-3d;
}
.frontface{
    background: #303030;
    transform: rotateY(0deg) translateZ(160px);
    border-radius: 30px 0 0 10px;
    overflow: hidden;
    /* opacity: 0.2; */
}
.frontface::after{
    content: "";
    position: absolute;
    bottom: -30%;

    width: 400px;
    height: 400px;
    background: #008cff;
    border-radius: 50%;
}
.backface{
    background: #303030;
    transform: rotateY(90deg) translateZ(160px);
    border-radius: 0 30px 10px 0;
    overflow: hidden;
}
.backface::before{
    content: "";
    position: absolute;
    bottom: -30%;
    left: 50%;
    width: 400px;
    height: 400px;
    background: #008cff;
    border-radius: 50%;
}

.wrapper:hover .card{
    transform: rotateY(-90deg);
}

.imgWrapper{
    position: absolute;
    z-index: 5;
    animation: flote 3s ease-in-out infinite alternate;
}
.imgWrapper img{
    width: 300px;
    height: 300px;
    transition: 0.3s;
    position: relative;
    top: 0;
    left: 50px;
}

@keyframes flote {
    0%{
        transform: translateY(-10px) translateX(25px);
    }
    100%{
        transform: translateY(20px) translateX(18px);
    }
}
.frontface .shadow{
    position: 
    absolute;
    z-index: 5;
    bottom: 30px;
    right: -40px;
    width: 300px;
    height: 50px;
    background: radial-gradient(#00000083, #0000, #0000);
    animation: shadow-f 3s ease-in-out infinite alternate;    
}
@keyframes shadow-f {
    0%{
        padding: 0 0;
        opacity: 0.5;
    }
    100%{
        padding: 0 100px;
        opacity: 1;
    }
}


.backface .shadow{
    position: 
    absolute;
    z-index: 5;
    bottom: 30px;
    right: -40px;
    width: 350px;
    height: 50px;
    background: radial-gradient(#00000083, #0000, #0000);
    animation: shadow-f 3s ease-in-out infinite alternate;    
}
.wrapper:hover .imgWrapper img{
    rotate: 30deg;
    left: 40px;
    top: 100px;
}

h1{
    background: gray;
    padding: 0 6px;
    display: inline;
    color: #303030;
    position: relative;
    top: 30px;
    left: 10px;
}

h2{
    margin-bottom: 10px;

}
.size{
    display: flex;
    margin-bottom: 50px;
    
}
.size span{
    border: 2px solid white
    ;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

Customize your 3D product preview card by adding your product images, descriptions, and colors. This dynamic design element is perfect for showcasing products on your e-commerce website.

0 Comments