3D 카드 효과

6068 단어 animationhtmlcssjavascript
YouTube Video by me


오늘은 CSS와 자바스크립트를 이용하여 움직이는 카드 디자인을 만드는 방법에 대해 알아보겠습니다.

세부 사항을 설명하는 신발 제품 카드를 만들 것입니다.


최종 결과




코드펜




HTML 코드

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>3d Card Effect</title>
        <link
            href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
            rel="stylesheet"
        />
        <link rel="stylesheet" href="./style.css" />
    </head>
    <body>
        <div class="container">
            <div class="card">
                <div class="sneaker">
                    <div class="circle"></div>
                    <img src="./adidas.png" alt="adidas" />
                </div>
                <div class="info">
                    <h1 class="title">Adidas ZX</h1>
                    <h3>
                        FUTURE-READY TRAINERS WITH WRAPPED BOOST FOR EXCEPTION
                        COMFORT.
                    </h3>
                    <div class="sizes">
                        <button>39</button>
                        <button>40</button>
                        <button class="active">42</button>
                        <button>44</button>
                    </div>
                    <div class="purchase">
                        <button>Purchase</button>
                    </div>
                </div>
            </div>
        </div>
        <script src="./app.js"></script>
    </body>
</html>



CSS 코드

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Poppins", sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}

.container {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card {
    transform-style: preserve-3d;
    min-height: 80vh;
    width: 35rem;
    border-radius: 30px;
    padding: 0rem 5rem;
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0px 0px 50px rgba(0, 0, 0, 0.2);
}

.sneaker {
    min-height: 35vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sneaker img {
    width: 20rem;
    z-index: 2;
    transition: all 0.75s ease-out;
}

.circle {
    width: 15rem;
    height: 15rem;
    background: linear-gradient(
        to right,
        rgba(245, 70, 66, 0.75),
        rgba(8, 83, 156, 0.75)
    );
    position: absolute;
    border-radius: 50%;
    z-index: 1;
}

.info h1 {
    font-size: 3rem;
    transition: all 0.75s ease-out;
}

.info h3 {
    font-size: 1.3rem;
    padding: 2rem 0rem;
    color: #585858;
    font-weight: lighter;
    transition: all 0.75s ease-out;
}

.sizes {
    display: flex;
    justify-content: space-between;
    transition: all 0.75s ease-out;
}

.sizes button {
    padding: 0.5rem 2rem;
    background: none;
    border: none;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
    border-radius: 30px;
    cursor: pointer;
    font-weight: bold;
    color: #585858;
}

button.active {
    background: #585858;
    color: white;
}

.purchase {
    margin-top: 5rem;
    transition: all 0.75s ease-out;
}

.purchase button {
    width: 100%;
    padding: 1rem 0rem;
    background: #f54642;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 30px;
    font-weight: bolder;
    outline: none;
}



자바스크립트 코드

//Movement Animation to happen
const card = document.querySelector(".card");
const container = document.querySelector(".container");

//Items
const title = document.querySelector(".title");
const sneaker = document.querySelector(".sneaker img");
const purchase = document.querySelector(".purchase");
const description = document.querySelector(".info h3");
const sizes = document.querySelector(".sizes");

//Moving Animation Event
container.addEventListener("mousemove", (e) => {
    let xAxis = (window.innerWidth / 2 - e.pageX) / 25;
    let yAxis = (window.innerHeight / 2 - e.pageY) / 25;
    card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
});

//Animate In
container.addEventListener("mouseenter", (e) => {
    card.style.transition = "none";

    //Popout
    title.style.transform = "translateZ(150px)";
    sneaker.style.transform = "translateZ(200px) rotateZ(-15deg)";
    description.style.transform = "translateZ(125px)";
    sizes.style.transform = "translateZ(100px)";
    purchase.style.transform = "translateZ(75px)";
});

//Animate Out
container.addEventListener("mouseleave", (e) => {
    card.style.transition = "all 0.5s ease";
    card.style.transform = `rotateY(0deg) rotateX(0deg)`;

    //Popback
    title.style.transform = "translateZ(0px)";
    sneaker.style.transform = "translateZ(0px) rotateZ(0deg)";
    description.style.transform = "translateZ(0px)";
    sizes.style.transform = "translateZ(0px)";
    purchase.style.transform = "translateZ(0px)";
});
너무 많은 일을 하는 React 구성 요소(및 이를 단순화하는 방법)
UItableView에서 Cell 정렬을 자주 수행할 수 있습니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage