Ejemplo de tarjeta de producto HTML 3D de zapatillas Nike

608 codex

Abrir en el editor Publica tu código

Ejemplo de tarjeta de producto HTML 3D de zapatillas Nike

Recomendado

19 January 2024

Botón de Cambio de Tema

21 July 2025

Página de destino de alquiler de coches

13 March 2025

Un código de lebdev

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