Exemplo de cartão de produto 3D em HTML para tênis Nike

491 codex

Abrir no Editor Video Publique Seu Código

Exemplo de cartão de produto 3D em HTML para tênis Nike

Recomendado

19 April 2025

Um Código de Metehan

29 May 2025

Painel de administração do AdminHub v2.1

14 January 2026

Clone do jogo Geometry Dash em JavaScript

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

Recomendado

Um Código de Metehan

Painel de administração do AdminHub v2.1

Clone do jogo Geometry Dash em JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS