Bagaimana Membuat Animasi Tombol Flip 3D Dengan CSS

Animasi flip adalah kesan CSS popular yang dipaparkan kedua-dua bahagian hadapan dan belakang daripada elemen HTML dengan mengubahnya dari atas ke bawah, atau dari kiri ke kanan (dan sebaliknya). Mereka adalah rad dalam 2 dimensi, tetapi mereka lebih sejuk apabila dilakukan dalam 3D.

Dalam jawatan ini, saya akan menunjukkan kepada anda bagaimana membuat butang 3D mudah, dan tambah animasi flip kepada mereka.

Anda boleh melihat keputusan di demo di bawah, jika anda mengklik pada butang, mereka akan melakukan animasi flip berlabel.

1. Mewujudkan HTML untuk butang 3D

Untuk membuat butang 3D (dengan Top → Bottom flip), pertama kita menyusun tiga

s pada satu sama lain, dua untuk muka depan dan belakang butang, dan yang ketiga untuk mengisi kedalaman di tengah. Kami meletakkan muka tiga butang ke dalam .flipBtn bekas yang akan berfungsi sebagai butang 3D, dan kami letakkan butang 3D ke dalam .flipBtnWrapper pembalut.

2. Menambah gaya asas dengan CSS

Kami menetapkan lebar dan ketinggian sifat pembungkus, butang, dan butang muka, dan letakkannya menggunakan teknik kedudukan relatif / mutlak.

 .flipBtnWrapper lebar: 200px; ketinggian: 200px; kedudukan: relatif;  .flipBtn, .flipBtn_face width: 100%; ketinggian: 100%; kedudukan: mutlak;

3. Gaya muka 3 butang

Kami menambah imej latar belakang ke muka depan dan butang belakang, dan menetapkan gradien linear sejuk di belakang imej untuk kedua-duanya. Silap mata di sini ialah dalam CSS, anda boleh menetapkan beberapa imej sebagai imej latar belakang untuk elemen yang sama, dan anda juga boleh mengisytiharkan kecerunan sebagai imej latar belakang.

Bahagian tengah, .flipBtn_mid, diberi a ketinggian daripada 20px, dan ruang 20px yang sama dibuat antara muka depan dan belakang. Kami mencapai yang terakhir dengan menggunakan translateZ () Fungsi CSS itu bergerak elemen di sepanjang paksi z. Kami menolak muka belakang kembali dengan 10px, dan membawa muka depan ke depan dengan 10px.

 .flipBtn_front background-image: url ("image / css-3d-flip-button-animation-play.png"), linear-gradient (# FF6366 50%, # FEA56E); backface-visibility: hidden; mengubah: translateZ (10px);  .flipBtn_back background-image: url ("image / css-3d-flip-button-animation-pause.png"), linear-gradient (# FF6366 50%, # FEA56E); warna latar belakang: biru; mengubah: translateZ (-10px);  .flipBtn_mid ketinggian: 20px; warna latar belakang: # d5485a; mengubah: rotateX (90deg); atas: -10px;

Untuk tutupi ruang antara muka depan & belakang dengan yang tengah, kami letakkan muka tengah rata merentasi x-plane ruang 3D yang menggunakan mengubah: rotateX (90deg); peraturan itu menjadikannya serenjang untuk kedua-dua muka depan dan belakang butang pada y-pesawat.

Oleh kerana muka tengah diletakkan rata di atas kapal terbang x, titik puncak pada paksi-y pergi ke 10px (separuh ketinggiannya) dari asal. Jadi, untuk menariknya kembali dan menyelaraskan bahagian atasnya dengan kedua-dua muka butang yang lain, saya menambah atas: -10px peraturan juga.

Saya menggunakannya backface-visibility Hartanah CSS untuk muka depan, jadi apabila kita flip butang, belakang muka depan tidak akan kelihatan.

Setakat ini, anda hanya akan melihat wajah depan pada skrin, kerana pesawat x tersembunyi dari pandangan, dan pada y-pesawat (skrin) muka terakhir yang dibaringkan adalah bahagian depan. Dengan berputar butang anda akan dapat melihat muka lain juga.

4. Menghidupkan butang

Ciri-ciri CSS gaya berubah menentukan sama ada elemen kanak-kanak unsur HTML dipaparkan rata, atau diposisikan dalam ruang 3D. Dalam coretan kod di bawah, transform-style: preserve-3d; peraturan memberikan kelantangan 3D ke butang kami, sementara mengubah: rotatexX () harta itu berputar di sekitar paksi-x.

 .flipBtn transform-style: preserve-3d; mengubah: rotateX (-120deg);

Perhatikan yang saya gunakan -120deg semata-mata untuk tujuan demonstrasi, dengan cara ini lebih mudah untuk menggambarkan bagaimana giliran butang berfungsi.

Bagaimanapun, dalam langkah seterusnya kita akan mengubahnya -180deg untuk membuat butang itu sepenuhnya flip sekitar.

5. Menghidupkan butang

Pada ketika ini, butang 3D kami masih tidak dinyanyikan. Kita boleh melakukan ini dengan menggunakan peralihan harta. Kami menggunakannya ubah harta untuk nilai pertama, kerana ini adalah harta yang kita mahu menggunakan kesan peralihan untuk. Nilai kedua ialah tempoh, 2s.

Mari kita buat butang hanya berputar di atas hover, jadi bukannya .flipBtn pemilih, mari kita gunakan .flipBtnWrapper: hover .flipBtn. Seperti yang dinyatakan sebelum ini, juga menukar nilai rotateX () kepada -180deg untuk membuat butang flip sekitar.

 .flipBtn transition: transform 2s; transform-style: preserve-3d;  .flipBtnWrapper: hover .flipBtn transform: rotateX (-180deg);

Perhatikan bahawa dalam repo Github, saya tambah kotak semak untuk setiap butang untuk memadamkan animasi : diperiksa bukannya pada : berlegar, dengan cara ini ia bertindak seperti butang sebenar. Saya juga termasuk empat butang yang berbeza dengan empat arah flip (Top → Bawah, Bawah → Atas, Kanan → Kiri dan Kiri → Kanan), supaya anda dengan mudah boleh menggunakan mana-mana yang anda mahu.

Lihat Demo
Muat turun Sumber