HTML, CSS, and jQuery: Create a cool 3D flip card-JS Tutorial-php.cn

HTML, CSS, and jQuery: Create a cool 3D flip card

PHPz

Release： 2023-10-24 12:57:40

Original

1619 people have browsed it

HTML, CSS, and jQuery: Create a cool 3D flip card

HTML, CSS and jQuery: Create a cool 3D flip card

In web design and development, cool effects can enhance the user experience and make the website More attractive. A common cool effect is 3D flipping cards. This article will introduce how to use HTML, CSS and jQuery to create a cool 3D flip card effect, and provide specific code examples.

First, we need an HTML structure to hold the content of the flip card. Let's create a simple HTML page and add the necessary CSS and JavaScript links. The code is as follows:

<!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>

Copy after login

The above code creates a simple card containing div elements for the front and back panels. The card class will be used to style the card container, the card-inner class will be used to implement the flip effect, and the card-front and card-back classes will be used to distinguish the front and back.

Next, let’s add CSS styles to the card. Create a file called style.css and add the following code to it:

.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;
}

Copy after login

The above code styles the appearance and flip effect of the card. By setting the perspective property, we can add some depth to the card. Use the transform attribute and transition attribute to achieve the flip effect. The card:hover .card-inner selector will trigger flipping of the card on mouseover.

Finally, we need to use jQuery to initialize the flip card. Create a file named script.js and add the following code to it:

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

Copy after login

The above code uses jQuery's toggleClass method to add or remove the flip class, thereby triggering the flip effect of the card. When the user clicks on the card, it switches between front and back.

Now we have completed the code needed to create a cool 3D flip card. Save all files in the same folder and open the HTML file in your browser and you will see a simple card. When you hover over or click on a card, it will flip it in 3D to show the front and back.

I hope this article will be helpful for you to learn HTML, CSS and jQuery to create cool 3D flip cards! Feel free to experiment with customizing the styles and adding more content to the cards to create your own unique effect.

The above is the detailed content of HTML, CSS, and jQuery: Create a cool 3D flip card. For more information, please follow other related articles on the PHP Chinese website!