Cara membuat susun atur flip kad responsif menggunakan HTML dan CSS-html tutorial-php.cn

Cara membuat susun atur flip kad responsif menggunakan HTML dan CSS

王林

Lepaskan： 2023-10-24 09:27:27

asal

1013 orang telah melayarinya

Cara membuat susun atur flip kad responsif menggunakan HTML dan CSS

Petikan:
Dalam pembangunan web hari ini, reka bentuk gaya responsif telah menjadi keperluan yang sangat penting. Untuk memberikan pengalaman pengguna yang terbaik pada peranti yang berbeza, kami perlu membuat reka letak untuk tapak web kami yang boleh menyesuaikan diri dengan saiz skrin yang berbeza. Dalam artikel ini, saya akan menunjukkan kepada anda cara membuat susun atur flip kad responsif menggunakan HTML dan CSS.

Langkah 1: Struktur HTML
Pertama, mari kita konfigurasikan struktur asas fail HTML. Kami akan menggunakan fail gaya CSS luaran, jadi kami perlu memautkan fail gaya CSS dalam fail HTML. Kodnya adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card">
        <div class="front">
            <h2>卡片正面</h2>
        </div>
        <div class="back">
            <h2>卡片背面</h2>
        </div>
    </div>
</body>
</html>

Salin selepas log masuk

Langkah 2: Gaya CSS
Sekarang, kami akan mencipta fail CSS yang dipanggil "style.css" dan menambah gaya asas pada reka letak kad. Kod adalah seperti berikut:

.card {
    width: 300px;
    height: 200px;
    perspective: 1000px;
    position: relative;
    margin: 0 auto;
}

.front, .back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    transition: transform 0.5s;
}

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

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

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

.card:hover .back {
    transform: rotateY(0deg);
}

h2 {
    text-align: center;
    line-height: 200px;
    color: #fff;
}

Salin selepas log masuk

Parse kod gaya CSS:

atribut perspektif digunakan untuk mencipta perspektif dan digunakan untuk mencapai kesan 3D. perspective 属性用于创建视角，用于实现 3D 效果。
backface-visibility 属性用于指定卡片的背面是否可见。
transition 属性用于实现平滑的过渡效果。
rotateY

keterlihatan belakang menentukan sama ada bahagian belakang kad kelihatan.

Atribut peralihan digunakan untuk mencapai kesan peralihan yang lancar.

putarY Atribut digunakan untuk menetapkan sudut putaran kad pada paksi Y.

Langkah 3: Pertanyaan Media#🎜🎜#Untuk mencapai reka letak responsif, kami boleh menggunakan pertanyaan media untuk menyesuaikan diri dengan saiz skrin yang berbeza. Dalam contoh ini, kami akan mengubah saiz lebar kad kepada 100% apabila lebar skrin kurang daripada 600px. Kodnya adalah seperti berikut: #🎜🎜#

@media screen and (max-width: 600px) {
    .card {
        width: 100%;
    }
}

Salin selepas log masuk

#🎜🎜# Ringkasan: #🎜🎜# Artikel ini menunjukkan kepada anda cara membuat reka letak flip kad responsif menggunakan HTML dan CSS. Dengan menambahkan gaya CSS dan pertanyaan media yang sesuai, kami boleh menjadikan reka letak kad kelihatan terbaik pada peranti yang berbeza. Anda boleh menyesuaikan gaya dan saiz kad mengikut keperluan anda. Semoga artikel ini dapat membantu anda lebih memahami dan menggunakan teknik dan konsep HTML dan CSS. #🎜🎜#

Atas ialah kandungan terperinci Cara membuat susun atur flip kad responsif menggunakan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!