Exemple de fiche produit 3D HTML pour une chaussure Nike

1,030 codex

Ouvrir dans l'éditeur Publiez votre code

Exemple de fiche produit 3D HTML pour une chaussure Nike

Recommandé

18 September 2025

Animation CSS : effet de fragment de mémoire fantôme

3 January 2025

Formulaire de contact - Mis à jour

6 June 2025

Un code par alejandrokundrah

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>3D Product Card</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="container">
        <div class="card">
            
            <div class="imgBx">
                <img src="https://www.pngkey.com/png/full/164-1649356_nike-air-max-270-triple-white-all-black.png" alt="Nike Shoe">
            </div>

<div class="color">
                    <h3>Color :</h3>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>

</div>
    </div>

</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #131313; /* Deep Black */
}

.container {
    position: relative;
}

.card {
    position: relative;
    width: 320px;
    height: 450px;
    background: #232323;
    border-radius: 20px;
    overflow: hidden; /* Important! Keeps everything inside the rounded corners */
}
/* This pseudo-element creates the big colored circle */
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #9bdc28; /* The "Nike Volt" Green */
    clip-path: circle(150px at 80% 20%);
    transition: 0.5s ease-in-out;
}

/* Hover Effect: The circle expands to fill the background */
.card:hover::before {
    clip-path: circle(300px at 80% -20%);
}
.card .imgBx {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10000; /* Puts the shoe ON TOP of everything */
    width: 100%;
    height: 220px;
    transition: 0.5s;
}

.card .imgBx img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-25deg); /* Tilted start position */
    width: 270px;
}

/* Hover Interaction: The shoe floats UP and rotates */
.card:hover .imgBx {
    top: 0%;
    transform: translateY(0%);
}

.card:hover .imgBx img {
    /* Rotates straight when hovered */
    transform: translate(-50%, -50%) rotate(0deg); 
}
.card .contentBx {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    text-align: center;
    transition: 1s;
    z-index: 10;
}

.card:hover .contentBx {
    height: 210px; /* Slides up to reveal options */
}

.card .contentBx h2 {
    position: relative;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
}

/* Styling the Sizes */
.card .contentBx .size, 
.card .contentBx .color {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 20px;
    transition: 0.5s; 
    opacity: 0;
    visibility: hidden; /* Hidden by default */
}

/* Reveal details on hover */
.card:hover .contentBx .size,
.card:hover .contentBx .color {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.5s; /* Waits for the shoe to move up first */
}

/* Simple Button Styling */
.card .contentBx a {
    display: inline-block;
    padding: 10px 20px;
    background: #fff;
    border-radius: 4px;
    margin-top: 10px;
    text-decoration: none;
    font-weight: 600;
    color: #111;
    opacity: 0;
    transform: translateY(50px);
    transition: 0.5s;
}

.card:hover .contentBx a {
    opacity: 1;
    transform: translateY(0px);
    transition-delay: 0.75s; /* Comes in last */
}