Exemple de fiche produit 3D HTML pour une chaussure Nike

33 codex

Ouvrir dans l'éditeur Video Publiez votre code

Exemple de fiche produit 3D HTML pour une chaussure Nike

Recommandé

23 August 2025

Modèle HTML/CSS de page de connexion de luxe

21 July 2025

Boîte d'inscription de connexion 3D HTML CSS Design

16 November 2024

Comment créer une barre latérale de grille en CSS

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 */
}

Recommandé

Modèle HTML/CSS de page de connexion de luxe

Boîte d'inscription de connexion 3D HTML CSS Design

Comment créer une barre latérale de grille en CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS