kesan flip CSS3

Kesan flip CSS3 ialah kesan biasa dalam reka bentuk web Ia boleh menyelak elemen web dari hadapan ke belakang, atau dari belakang ke hadapan, mencipta kesan tiga dimensi dan meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan secara terperinci kaedah pelaksanaan dan kod berkaitan kesan flip CSS3.

1. Asas flip CSS3

ubah bentuk 3D dalam CSS3 dicapai melalui atribut transformasi Terdapat dua atribut yang biasa digunakan: rotateX dan rotateY, yang digunakan di sepanjang paksi X dan Putar pada. paksi Y. Kesan flip elemen boleh dicapai dengan mudah menggunakan dua atribut ini, seperti ditunjukkan dalam contoh berikut:

.flip-box { perspective: 1000px; } .flip-box-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; } .flip-box-front, .flip-box-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; } .flip-box-front { background-color: #bbb; color: black; } .flip-box-back { background-color: #2980b9; color: white; transform: rotateY(180deg); } .flip-box:hover .flip-box-inner { transform: rotateY(180deg); }

Kod di atas melaksanakan kesan flip mudah, mencetuskan .flip-box-inner dengan melayang pada .flip -elemen kotak Penjelmaan putaran unsur merealisasikan kesan flip unsur. Perlu diingatkan bahawa jarak pemerhatian ditetapkan melalui atribut perspektif, dan atribut gaya transformasi ditetapkan kepada preserve-3d untuk memastikan persembahan yang betul bagi ruang tiga dimensi.

2. Animasi flip CSS3

Selain kesan flip asas, CSS3 juga menyediakan lebih banyak fungsi ubah bentuk, yang boleh menunjukkan kesan yang lebih jelas melalui animasi. Berikut ialah beberapa kod pelaksanaan animasi flip CSS3 yang biasa digunakan:

1. animasi flip kotak 3D

.flip { transition: transform 0.5s; transform-style: preserve-3d; } .flip:hover { transform: rotate3d(0,1,0,180deg); }

Melalui fungsi rotate3d dalam CSS3, kesan putaran sepanjang mana-mana paksi boleh dicapai , di mana 180deg mewakili tahap terbalik. Apabila tetikus melayang di atas elemen .flip, kesan paparan animasi dicetuskan.

2. Animasi flip menu tiga dimensi 3D

.flip-menu { perspective: 800px; } .flip-menu > li { position: relative; display: inline-block; margin: 0 10px; transform-style: preserve-3d; transition: transform 0.5s; } .flip-menu > li > a { display: block; position: relative; color: #fff; text-decoration: none; background: #3498db; padding: 10px; box-shadow: 0 5px 10px rgba(0,0,0,0.1); } .flip-menu > li:hover { transform: rotateY(-180deg); } .flip-menu > li > a::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: inset 0 0 0 100px rgba(0,0,0,0.2); transform: rotateY(180deg); transition: transform 0.5s; } .flip-menu > li:hover > a:before { transform: rotateY(0deg); }

Kod di atas melaksanakan animasi flip menu tiga dimensi 3D, mencetuskan transformasi flip menu flip melalui tuding dan pada masa yang sama melalui elemen pseudo sebelum Dilaksanakan kesan paparan di belakang menu.

3. Ringkasan

Kesan flip CSS3 ialah salah satu kesan yang digunakan secara meluas dalam reka bentuk web Ia merealisasikan kesan di sepanjang tepi melalui fungsi ubah bentuk atribut transformasi dan jarak cerapan dalam ruang tiga dimensi Kesan flip paksi X dan paksi Y. Dalam pembangunan sebenar, atribut animasi CSS3 dan elemen pseudo boleh digunakan untuk memaparkan lagi kesan jelas dan tiga dimensi, membawa pengalaman visual yang lebih baik kepada pengguna.

Atas ialah kandungan terperinci kesan flip CSS3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!