Contoh terperinci kesan flop 3D kesan khas css3

Artikel ini terutamanya memperkenalkan kesan flip 3D kesan khas css3 Ia mempunyai nilai rujukan tertentu. Saya harap ia akan membantu anda.

Saya telah mempelajari CSS3 baru-baru ini dan mendapati ia semakin baik dan lebih baik. CSS3 hari ini bukan lagi CSS sebelumnya, dan kesan fungsi yang boleh dihasilkannya adalah di luar imaginasi kami. Ia boleh melaksanakan kilat, boleh mencipta beberapa kesan yang boleh dihasilkan oleh js, dan juga boleh menulis beberapa kesan seperti kecerunan, sudut bulat, bayang-bayang, dan lain-lain yang dibuat oleh ps. Ia sangat mempesonakan sehingga saya percaya ramai orang telah melakukannya . Mari kita kaji dengan lebih mendalam, haha ​​Saya juga mempelajarinya sedikit hari ini, terutamanya tentang beberapa kesan 3Dnya.

Kesan flop kad 3D sebenarnya ialah dua gambar, satu di hadapan dan satu di belakang Apabila yang di hadapan diputar, ia akan berputar ke a tertentu Apabila sudut dilaraskan, gambar-gambar yang berikutnya akan berputar bersama-sama dengannya. Adakah anda tidak sabar, datang dan belajar dengan saya, haha~@@@

Pertama sekali, kami mempunyai susun atur sedemikian dalam html:

<p class="outer">
    <p class="p1"></p>
    <p class="p2"></p>
</p>

Jangan memandang rendah p di luar, ia amat diperlukan untuk kandungan ini Tanpanya, kesan seterusnya tidak dapat dicapai Setelah susun atur selesai, sudah tiba masanya untuk mula mengusahakannya. Perkara pertama yang perlu dilakukan ialah bahagian luarnya. Anda boleh menentukannya sendiri, lebar dan tinggi 200. Sekarang setelah perkara luar selesai, perkara dalam akan bermula Di sini kami memberi 200*200. Pada masa ini, apabila saya melihat dalam penyemak imbas, saya mendapati bahawa p1 dan p2 dipaparkan atas dan bawah, satu ke atas dan satu ke bawah Ini adalah betul Anda mesti tahu bahawa p adalah elemen blok dan ia mengambil keseluruhan baris. tetapi ini tidak benar untuk apa yang kita katakan sebelum ini mesti ada percanggahan antara bahagian depan dan belakang. Untuk membezakan kedua-dua p, di sini kita perlu memberi mereka warna latar belakang yang berbeza. Kerja penyediaan awal hampir selesai, sekarang mari kita lihat bagaimana untuk mencapai kesannya!

Kami mahu mencapai kesan kegagalan kad Sebaik sahaja kami mendengarnya, kami tahu bahawa ini memerlukan penggunaan transformasi atribut baharu:rotateY(?deg ) dalam CSS3; Seseorang Anda mungkin bertanya mengapa ia adalah rotateY, tetapi anda tidak tahu, kan? Jadi apabila tetikus bergerak ke p, kita perlu membiarkannya mencapai kesan putaran Kemudian penggunaan p luar yang digunakan, ia tidak boleh berputar pada masa yang sama melainkan tetikus kita diklik di luar bahawa p, terdapat kod ini,

.outer:hover .p1{
            transform:rotateY(-180deg);
        }
        .outer:hover .p2{
            transform:rotateY(0deg);
        }

Putaran itu ada, tetapi putaran tanpa sebarang kesan peralihan kelihatan hodoh, jadi di sini, kami Untuk memberi mereka kesan peralihan, anda perlu menggunakan atribut baharu dalam CSS3 transition:all 2s di sini bermakna semua kesannya akan beralih. Bercakap mengenai perkara ini, kami sebenarnya tidak berurusan dengan satu perkara, iaitu, cara memutarkan yang semasa ke belakang, dan yang terakhir akan muncul serta-merta selepasnya. Ini adalah atribut yang sangat penting dalam imej transformasi. , ini bermakna apabila gambar itu bergerak ke tempat yang tidak kelihatan pada skrin paparan, ia hilang. Maksudnya, kita boleh melihatnya apabila ia pada asalnya menghadap ke hadapan, tetapi apabila ia berputar 180 darjah di sepanjang paksi Y, kita tidak dapat melihatnya lagi Jika kita tidak menambah atribut ini, kita boleh melihat imej terbalik selepas putaran ia tidak akan kelihatan lagi. Jadi kita akan menambah atribut ini kepada dua p kecil. Dan untuk mencapai kesan ini, kita perlu membuat satu daripada dua p kecil tidak diputar pada mulanya. untuk berputar, kami Anda tidak akan melihat p kedua serta-merta, tetapi tunggu sehingga ia berputar ke tempat yang tidak dapat dilihat, dan kemudian p kedua akan muncul. Kod khusus adalah seperti berikut:

<html><head>
    <title>3D翻牌效果 </title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery.js"></script>
    <style type="text/css">
        .outer{
           width: 510px;
            height: 340px;
            border: 1px red solid;
            margin: 0 auto;
        }
        .outer p{
           width:510px;
            height: 340px;
            position: absolute;
              transform-style: preserve-3d;
             backface-visibility:hidden;
            transition:all 2s;
        }
        .p1{
           background: url("images/1.jpg");
            transform:rotateY(0);
        }
        .p2{
            background: url("images/2.jpg") no-repeat;
            transform:rotateY(-180deg);
        }
        .outer:hover .p1{
            transform:rotateY(-180deg);
        }
        .outer:hover .p2{
           transform:rotateY(0deg);
        }
    </style></head><body><p class="outer">
    <p class="p1"></p>
    <p class="p2"></p></p></body></html>

Di atas adalah kandungan utama artikel ini, saya harap ia dapat membantu semua orang.

【Tutorial berkaitan yang disyorkan】

1 Tutorial video CSS
2 Manual dalam talian CSS
3 tutorial bootstrap