Efecto de desplazamiento de tarjeta 3D

1943 Andev.web

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

Recomendado

21 July 2025

Entrada de carga de archivos con icono SVG

5 May 2024

Animación del botón de desplazamiento CSS

26 August 2024

Tierra 3D

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Andev Web</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="card blue">
        <div class="product">
            <span class="number">01</span>
            <span class="sneakers">SNEAKERS</span>
            <span class="price">$39.9</span>
            <img src="https://i.postimg.cc/6p4GRBpk/nike-blue.png">
        </div>
        <div class="title">
            <h2>Nike Blue</h2>
        </div>
    </div>

<div class="card purple">
        <div class="product">
            <span class="number">02</span>
            <span class="sneakers">SNEAKERS</span>
            <span class="price">$49.9</span>
            <img src="https://i.postimg.cc/bvXS94Gs/nike-purple.png">
        </div>
        <div class="title">
            <h2>Nike Purple</h2>
        </div>
    </div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,800;1,800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: white;
    font-family: 'Poppins', sans-serif;
    transition: 0.3s ease-in-out;
}

body {
    background: #120D24;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 50px;
}

.card {
    width: 220px;
    height: 340px;
    border-radius: 12px;
    transform-style: preserve-3d;
}
.card.blue {
    background: linear-gradient(135deg, #09AFFF, #125575);
}
.card.purple {
    background: linear-gradient(135deg, #5911F2, #290987);
}

.card .product {
    height: 85%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    transform-style: preserve-3d;
}
.product .number {
    font-size: 80px;
    line-height: 80px;
    font-style: italic;
    opacity: 0.25;
}
.product .sneakers {
    font-size: 35px;
    line-height: 35px;
    font-style: italic;
    opacity: 0.7;
}
.product img {
    height: 280px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-35%, -45%, 0);
    pointer-events: none;
}
.product .price {
    background: rgba(255, 255, 255, 0.15);
    margin-top: auto;
    margin-left: auto;
    margin-right: -20px;
    padding: 5px 20px;
    border-radius: 99px 0 0 99px;
}

.card .title {
    height: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 12px 12px;
    transform-style: preserve-3d;
}
.card.blue .title {
    background: #039BE5;
}
.card.purple .title {
    background: #5B1AE3;
}

.card:hover .product img {
    transform: translate3d(-50%, -40%, 80px);
}
.card:hover .product .number {
    transform: translateZ(40px);
    opacity: 1;
}
.card:hover .product .sneakers {
    transform: translateZ(40px);
    opacity: 0.85;
}
.card:hover .product .price {
    transform: translateZ(20px);
}
.card:hover .title h2 {
    transform: translateZ(20px);
}

JS

Recomendado

Entrada de carga de archivos con icono SVG

Animación del botón de desplazamiento CSS

Tierra 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS