Cara Membuat Animasi Balik Tombol 3D Dengan CSS
Balik animasi adalah efek CSS populer yang ditampilkan bagian depan dan belakang elemen HTML dengan memutarnya dari atas ke bawah, atau dari kiri ke kanan (dan sebaliknya). Mereka rad dalam 2 dimensi, tetapi mereka lebih keren ketika dilakukan dalam 3D.
Dalam posting ini, saya akan menunjukkan caranya buat tombol 3D sederhana, dan tambahkan animasi flip ke mereka.
Anda dapat melihat hasilnya pada demo di bawah ini, jika Anda mengklik tombol, mereka akan melakukan animasi flip berlabel.
1. Membuat HTML untuk tombol 3D
Untuk membuat tombol 3D (dengan flip Atas → Bawah), pertama kita susun tiga Kami mengatur Kami menambahkan gambar latar belakang ke muka tombol depan dan belakang, dan mengatur gradien linier keren di belakang gambar untuk keduanya. Kuncinya di sini adalah bahwa di CSS, Anda dapat mengatur beberapa gambar sebagai gambar latar untuk elemen yang sama, dan Anda juga dapat mendeklarasikan gradien sebagai gambar latar. Wajah tengah, Untuk menutupi ruang antara wajah depan & belakang dengan yang di tengah, kita berbaring wajah tengah datar melintasi bidang x ruang 3D menggunakan Karena wajah tengah diletakkan rata pada bidang x, titik puncaknya pada sumbu y bergerak 10px (setengah dari ketinggiannya) turun dari aslinya. Jadi, untuk menariknya kembali dan menyelaraskan bagian atasnya dengan dua sisi tombol lainnya, saya menambahkan Saya menggunakan Sejauh ini, Anda hanya akan melihat wajah depan di layar, karena x-plane tersembunyi dari pandangan, dan pada y-plane (layar) wajah terakhir diletakkan di depan. Dengan memutar tombol Anda akan dapat melihat wajah-wajah lain juga. Properti CSS gaya transformasi menentukan apakah elemen turunan dari elemen HTML ditampilkan datar, atau diposisikan di ruang 3D. Dalam cuplikan kode di bawah ini, the Perhatikan bahwa saya menggunakan Namun pada langkah selanjutnya kita akan mengubahnya menjadi Pada titik ini, tombol 3D kami masih belum dianimasikan. Kita dapat melakukan ini dengan menggunakan Mari kita buat tombol hanya berputar pada hover, jadi alih-alih Perhatikan bahwa dalam repo Github, saya menambahkan kotak centang ke setiap tombol untuk mengaktifkan animasi .flipBtn wadah yang akan berfungsi sebagai tombol 3D, dan kami menempatkan tombol 3D ke dalam .flipBtnWrapper pembungkus.
2. Menambahkan gaya dasar dengan CSS
lebar dan tinggi properti pembungkus, tombol, dan tombol menghadap, dan posisikan menggunakan teknik penentuan posisi relatif / absolut. .flipBtnWrapper width: 200px; tinggi: 200px; posisi: relatif; .flipBtn, .flipBtn_face width: 100%; tinggi: 100%; posisi: absolut;
3. Gaya 3 tombol menghadap
.flipBtn_mid, diberikan a tinggi 20px, dan ruang yang sama 20px dibuat antara wajah depan dan belakang. Kami mencapai yang terakhir dengan menggunakan translateZ () Fungsi CSS itu memindahkan elemen di sepanjang sumbu z. Kami mendorong kembali wajah belakang sebesar 10px, dan membawa wajah depan ke depan sebesar 10px. .flipBtn_front background-image: url ("image / css-3d-flip-button-animation-play.png"), gradien linier (# FF6366 50%, # FEA56E); visibilitas-backface: tersembunyi; transform: translateZ (10px); .flipBtn_back background-image: url ("image / css-3d-flip-button-animation-pause.png"), gradien linier (# FF6366 50%, # FEA56E); warna latar belakang: biru; transform: translateZ (-10px); .flipBtn_mid height: 20px; warna latar: # d5485a; transform: rotateX (90deg); atas: -10px; transform: rotateX (90deg); atur itu membuatnya tegak lurus untuk kedua tombol tombol depan dan belakang pada y-plane.atas: -10px memerintah juga.visibilitas-backface Properti CSS untuk wajah depan, jadi ketika kita membalik tombol, bagian belakang wajah depan tidak akan terlihat.
4. Memutar tombol
transform-style: preserve-3d; aturan memberikan volume 3D ke tombol kami, sedangkan transform: rotatexX () properti memutarnya di sekitar sumbu x. .flipBtn transform-style: preserve-3d; transform: rotateX (-120deg);
-120 derajat semata-mata untuk tujuan demonstrasi, karena cara ini lebih mudah untuk menggambarkan cara kerja rotasi tombol.
-180 derajat untuk membuat tombol benar-benar terbalik.5. Animasi tombol
transisi milik. Kami menggunakan mengubah properti untuk nilai pertama, karena ini adalah properti yang ingin kami terapkan efek transisi untuk. Nilai kedua, adalah durasi, 2s..flipBtn pemilih, mari kita gunakan .flipBtnWrapper: arahkan kursor .flipBtn. Seperti disebutkan sebelumnya, juga mengubah nilai rotateX () untuk -180 derajat untuk membuat tombol terbalik. .flipBtn transisi: transform 2s; transform-style: preserve-3d; .flipBtnWrapper: hover .flipBtn transform: rotateX (-180deg);
: dicentang bukannya pada : melayang, dengan cara ini ia berperilaku lebih seperti tombol sungguhan. Saya juga menyertakan empat tombol berbeda dengan empat arah flip (Atas → Bawah, Bawah → Atas, Kanan → Kiri dan Kiri → Kanan), sehingga Anda dapat dengan mudah menggunakan mana saja yang Anda inginkan.
