Esempio di scarpa Nike in HTML con scheda prodotto 3D

487 codex

Apri nell'Editor Video Pubblica il Tuo Codice

Esempio di scarpa Nike in HTML con scheda prodotto 3D

Consigliato

23 August 2025

Modello HTML CSS della pagina di accesso della SEAT Leon

13 January 2026

Modello HTML per sito web di film

28 May 2025

Un codice di Metehan

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

Consigliato

Modello HTML CSS della pagina di accesso della SEAT Leon

Modello HTML per sito web di film

Un codice di Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS