HTML, CSS 및 jQuery: 멋진 3D 플립 카드 만들기-JS 튜토리얼-php.cn

HTML, CSS 및 jQuery: 멋진 3D 플립 카드 만들기

PHPz

풀어 주다： 2023-10-24 12:57:40

원래의

1601명이 탐색했습니다.

HTML, CSS 및 jQuery: 멋진 3D 플립 카드 만들기

웹 디자인 및 개발에서 멋진 효과는 사용자 경험을 향상시키고 웹 사이트를 더욱 매력적으로 만들 수 있습니다. 일반적인 멋진 효과는 3D 카드 뒤집기입니다. 이 기사에서는 HTML, CSS 및 jQuery를 사용하여 멋진 3D 플립 카드 효과를 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

먼저 플립 카드의 내용을 담을 HTML 구조가 필요합니다. 간단한 HTML 페이지를 만들고 필요한 CSS 및 JavaScript 링크를 추가해 보겠습니다. 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <title>3D翻转卡片</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div class="card">
        <div class="card-inner">
            <div class="card-front">
                <h2>正面</h2>
            </div>
            <div class="card-back">
                <h2>背面</h2>
            </div>
        </div>
    </div>
</body>
</html>

로그인 후 복사

위 코드는 앞면과 뒷면의 두 패널에 대한 div 요소가 포함된 간단한 카드를 만듭니다. 카드 클래스는 카드 컨테이너의 스타일을 지정하는 데 사용되며, 카드 내부 클래스는 뒤집기 효과를 구현하는 데 사용되며, 카드 전면 및 카드 뒷면 클래스는 앞면과 뒷면을 구분하는 데 사용됩니다.

이제 카드에 CSS 스타일을 추가해 보겠습니다. style.css라는 파일을 만들고 다음 코드를 추가합니다.

.card {
    width: 200px;
    height: 300px;
    perspective: 1000px;
}

.card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.card:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
}

.card-front {
    transform: rotateY(0deg);
    background-color: #3498db;
}

.card-back {
    transform: rotateY(180deg);
    background-color: #e74c3c;
    color: #fff;
}

로그인 후 복사

위 코드는 카드의 모양과 뒤집기 효과에 스타일을 지정합니다. 관점 속성을 설정하여 카드에 깊이를 추가할 수 있습니다. 뒤집기 효과를 얻으려면 변환 속성과 전환 속성을 사용하세요. 카드:hover .card-inner 선택기는 마우스 오버 시 카드 뒤집기를 트리거합니다.

마지막으로 jQuery를 사용하여 플립카드를 초기화해야 합니다. script.js라는 파일을 생성하고 다음 코드를 추가합니다.

$(document).ready(function() {
    $('.card').click(function() {
        $(this).find('.card-inner').toggleClass('flip');
    });
});

로그인 후 복사

위 코드는 jQuery의 ToggleClass 메소드를 사용하여 플립 클래스를 추가하거나 제거함으로써 카드의 플립 효과를 트리거합니다. 사용자가 카드를 클릭하면 앞면과 뒷면이 전환됩니다.

이제 멋진 3D 플립 카드를 만드는 데 필요한 코드가 완성되었습니다. 모든 파일을 동일한 폴더에 저장하고 브라우저에서 HTML 파일을 열면 간단한 카드가 표시됩니다. 카드 위로 마우스를 가져가거나 클릭하면 카드가 3D로 뒤집어 앞면과 뒷면이 표시됩니다.

이 기사가 HTML, CSS 및 jQuery를 배워 멋진 3D 플립 카드를 만드는 데 도움이 되기를 바랍니다! 스타일을 사용자 정의하고 카드에 더 많은 콘텐츠를 추가하여 자신만의 고유한 효과를 만들어보세요.

위 내용은 HTML, CSS 및 jQuery: 멋진 3D 플립 카드 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!