Mulai 3D CSS3
Untuk memainkan 3D CSS3, Anda harus memahami beberapa kosa kata, yaitu perspektif, rotasi dan terjemahan. Perspektif berarti melihat hal -hal 2D di layar dari perspektif yang realistis, sehingga menunjukkan efek 3D. Rotasi tidak lagi rotasi pada bidang 2D, tetapi rotasi sistem koordinat tiga dimensi, termasuk sumbu x, sumbu y, dan rotasi sumbu-z. Hal yang sama berlaku untuk terjemahan.
Tentu saja, menggunakan teori untuk diilustrasikan, Anda mungkin tidak mengerti. Berikut 3 gif:
Putar sepanjang sumbu x
Putar sepanjang sumbu Y
Putar sepanjang sumbu z
Seharusnya tidak ada masalah dengan rotasi, sehingga lebih mudah untuk memahami terjemahan, yaitu, bergerak pada sumbu x, sumbu y, dan sumbu z.
Anda mungkin mengatakan bahwa perspektif sulit dipahami. Izinkan saya memperkenalkan beberapa atribut perspektif.
perspektif
Nama perspektif bahasa Inggris adalah perspektif. Tanpa hal ini, tidak ada cara untuk membentuk efek 3D. Tetapi bagaimana hal ini memungkinkan browser kami untuk membentuk efek 3D? Anda dapat melihat gambar di bawah ini. Bahkan, mereka yang telah belajar melukis harus mengetahui hubungan perspektif, dan inilah alasannya.
Tetapi dalam CSS memiliki nilai numerik, misalnya, apa yang diwakili 1000px? Kita dapat memahami dengan cara ini bahwa jika kita melihat langsung pada objek, objek akan luar biasa dan menempati pandangan kita. Jarak kami dari itu semakin besar dan lebih kecil, dan pengertian tiga dimensi akan muncul. Faktanya, nilai ini membangun jarak antara mata kita dan layar, yang juga membangun ilusi 3D virtual.
Perspektif-Origin
Dari hal di atas kami memahami perspektif, dan menambahkan apa asal ini. Yang kami sebutkan sebelumnya adalah jarak dari objek, dan ini adalah garis pandangan mata. Posisi yang berbeda dari sudut pandang kami menentukan berbagai adegan yang kami lihat. Standarnya adalah pusat, yang merupakan perspektif-asal: 50% 50%. Nilai pertama adalah sumbu x di mana elemen 3D didasarkan, dan posisi kedua didefinisikan pada sumbu y.
Saat mendefinisikan atribut perspektif-asal untuk suatu elemen, elemen anaknya mendapatkan efek perspektif, bukan elemen itu sendiri. Harus digunakan dengan atribut perspektif dan hanya mempengaruhi elemen konversi 3D. (W3School)
transformasi gaya
Perspektif ada di sini lagi. Ya, itu adalah kunci 3D di CSS. Transform-style datar secara default. Jika Anda ingin melihat efek 3D pada elemen, Anda harus menggunakan transformasi-gaya: Cagar Alam, jika tidak, itu hanya transformasi bidang, bukan transformasi 3D.
Bawa Anda bermain dengan CSS3-3D Langkah demi Langkah
Kami memiliki sedikit pemahaman tentang konsep di atas, jadi mari kita mulai pertempuran yang sebenarnya di bawah ini!
Mari kita lihat efeknya, bukankah itu keren: Langsung kunjungi https://bupt-hjmm.github.io/css3-3d/, jika Anda pikir tidak apa-apa, ingatlah untuk memberikannya untuk membintangi hh
Langkah 1: Struktur HTML
Wadah yang sangat sederhana dibungkus dengan kotak sepotong yang berisi 6 buah
<dv> <verv> <verv> </div> <vv> </div> <viv> </div> <viv> </div> <verv> </div> <v div> </div> <Div> </div> <v div> </div> <v> </div> </div> </Div>
Langkah 2: Tambahkan atribut 3D yang diperlukan untuk memasuki dunia 3D
Melalui penjelasan di atas, Anda harus lebih akrab dengan perspektif.
/*Container*/.container {-webkit -perspection: 1000px; -Moz-perspektif: 1000px; -ms-perspektif: 1000px; Perspektif: 1000px;}/*box box*/ .piece-box {perspektif-origin: 50% 50%; -webkit-transform-style: cagar alam-3d; -Moz-Transform-style: cagar alam-3d; -MS-Transform-style: Preserve-3d; Transform-style: Preserve-3d;}Langkah 3: Tambahkan gaya yang diperlukan
/*Container*/.container {-webkit -perspection: 1000px; -Moz-perspektif: 1000px; -ms-perspektif: 1000px; Perspektif: 1000px;}/*box piece*/. PICE-BOX {Position: relatif; Lebar: 200px; Tinggi: 200px; Margin: 300px Auto; Perspektif-asal: 50% 50%; -webkit-transform-style: cagar alam-3d; -Moz-Transform-style: cagar alam-3d; -MS-Transform-style: Preserve-3d; Transform-style: preserve-3d;}/*Piece General Style*/. Piece {Position: Absolute; Lebar: 200px; Tinggi: 200px; Latar Belakang: Merah; opacity: 0.5;}. Piece-1 {latar belakang: #ff6666;}. Piece-2 {latar belakang: #fff00;}. Piece-3 {latar belakang: #006699;}. Piece-4 {latar belakang: #00999;} {latar belakang: #ff0033;}.Tentu saja, setelah Anda menyelesaikan langkah ini, Anda masih hanya melihat kuadrat, yang merupakan karya kami-6, karena transformasi 3D kami belum dimulai
Langkah 4: Serangan Transformasi 3D
Hal pertama adalah mewujudkan lentera berputar. Kita seharusnya tidak membiarkannya lebih dulu, menyadari bagian cahaya.
Bagaimana cara mencapainya? Karena untuk membentuk lingkaran, lingkarannya adalah 360 derajat dan kami memiliki 6 buah, maka, mudah untuk berpikir bahwa kami perlu memutar setiap bagian dalam kenaikan 60 derajat, dan menjadi sebagai berikut
Bagaimana cara menarik mereka keluar dari tengah?
Di sini kita juga harus mencatat bahwa setelah kita memutar elemen di sekitar sumbu Y, sumbu X dan Z benar -benar akan berputar, sehingga garis vertikal dari setiap permukaan kubus masih merupakan sumbu z. Kita hanya perlu mengubah nilai translateZ. Ketika TranslateZ positif, kami berjalan ke arah kami, sehingga kami dapat memisahkannya.
Tapi bagaimana cara mengukur jarak?
Apakah jelas sekali?
Mari kita ubah CSS
.piece-1 {latar belakang: #ff6666; -webkit-transform: rotate (0deg) translatez (173.2px); -MS-Transform: rotate (0deg) translatez (173.2px); -o-transform: rotate (0deg) translatez (173.2px); transformasi: rotate (0deg) translatez (173.2px);}. Piece-2 {latar belakang: #fff00; -webkit-transform: rotate (60deg) translatez (173.2px); -MS-Transform: rotate (60deg) translatez (173.2px); -o-transform: rotate (60deg) translatez (173.2px); transformasi: rotate (60deg) translatez (173.2px);}. Piece-3 {latar belakang: #0066699; -webkit-transform: rotate (120deg) translatez (173.2px); -MS-Transform: rotate (120deg) translatez (173.2px); -o-transform: rotate (120deg) translatez (173.2px); -o-transform: rotate (120deg) translatez (173.2px); transformasi: rotate (120deg) translatez (173.2px);}. Piece-4 {latar belakang: #009999; -webkit-transform: rotate (180deg) translatez (173.2px); -MS-Transform: rotate (180deg) translatez (173.2px); -o-transform: rotate (180deg) translatez (173.2px); transformasi: rotate (180deg) translatez (173.2px);}. Piece-5 {latar belakang: #ff0033; -webkit-transform: rotate (240deg) translatez (173.2px); -MS-Transform: rotate (240deg) translatez (173.2px); -o-transform: rotate (240deg) translatez (173.2px); transformasi: rotate (240deg) translatez (173.2px);}. Piece-6 {latar belakang: #ff6600; -webkit-transform: rotate (300deg) translatez (173.2px); -MS-Transform: rotate (300deg) translatez (173.2px); -o-transform: rotate (300deg) translatez (173.2px); Transform: Rotatey (300deg) TranslateZ (173.2px);}Apakah lentera berputar telah direalisasikan?
Langkah 5: Animasi Membuat 3D Bergerak
Untuk mencapai lentera yang bergerak, sebenarnya sangat sederhana. Kami hanya perlu menambahkan animasi rotasi ke kotak-kotak. Lengkapi animasi dalam 5 detik, putar dari 0 derajat hingga 360 derajat
/*box piece*/. box-box {position: relatif; Lebar: 200px; Tinggi: 200px; Margin: 300px Auto; Perspektif-asal: 50% 50%; -webkit-transform-style: cagar alam-3d; -Moz-Transform-style: cagar alam-3d; -MS-Transform-style: Preserve-3d; Transform-style: Preserve-3d; Animasi: Piecerotate 5s; -Moz-animasi: piecerotate 5s; / * Firefox */ -webkit -animasi: piecerotate 5s; / * Safari dan krom */ -oimasi: piecerotate 5s; /*Opera*/}/*animasi lampu revolving*/@keyframe piecerotate {0% {-webkit-transform: rotatey (0deg); -MS-Transform: rotate (0deg); -o-transform: rotate (0deg); transformasi: rotate (0deg);} 100% {-webkit-transform: rotate (360deg); -MS-Transform: rotate (360deg); -o-transform: rotate (360deg); transformasi: rotate (360deg);}}/ * firefox */@-moz-keyframes piecerotate {0% {-webkit-transform: rotate (0deg); -MS-Transform: rotate (0deg); -o-transform: rotate (0deg); transformasi: rotate (0deg);} 100% {-webkit-transform: rotate (360deg); -MS-Transform: rotate (360deg); -o-transform: rotate (360deg); transformasi: rotate (360deg);}}/ * safari dan chrome */@-webkit-keyframe piecerotate {0% {-webkit-transform: rotatey (0deg); -MS-Transform: rotate (0deg); -o-transform: rotate (0deg); transformasi: rotate (0deg);} 100% {-webkit-transform: rotate (360deg); -MS-Transform: rotate (360deg); -o-transform: rotate (360deg); Transform: rotatey (360deg);}}/ * opera */@-o -keyframe piecerotate {0% {-webkit-transform: rotate (0deg); -MS-Transform: rotate (0deg); -o-transform: rotate (0deg); transformasi: rotate (0deg);} 100% {-webkit-transform: rotate (360deg); -MS-Transform: rotate (360deg); -o-transform: rotate (360deg); Transform: rotate (360deg);}}Saya tidak akan meletakkan gif di sini ~ apakah HHH mencapai efek keren? Ini belum berakhir ~ lebih banyak perakitan kubus keren
Sebenarnya tidak sulit untuk mengimplementasikan kubus. Saya tidak akan membahas detailnya di sini. Pertama -tama Anda dapat membayangkan wajah dan kemudian memperluas wajah lain untuk mengimplementasikannya. Misalnya, kami meletakkan translatez depan (100px) dari kubus dekat dengan 100px kami, dan kemudian translatez (-100px) dan kemudian memindahkannya dari 100px kami. Di sebelah kiri adalah translatex (-100px, kemudian berputar (90deg), di sebelah kanan translatex (100px) dan kemudian rotate (90deg), di bagian atas translatey (-100px), rotatex (90deg), pada bagian bawah diterjemahkan (100px), rotatex (90deg), pada bagian bawah adalah translatey (100px), rotatex (90deg), pada bagian bawah adalah translatey (100px), rotatex (90deg), pada bagian bawah adalah translatey (100px), rotatex (90deg), pada bagian bawah adalah translatey (100px), rotatex (90deg), pada bagian bawah adalah translatey (100px), rotatex (90deg), pada bagian bawah adalah translatey (100px), rotatex (90deg), on the Bottom adalah translateSy (100px), rotatex (90deg (90deg) selama kita menulisnya ke dalam animasi, semuanya akan dilakukan.
CSS adalah sebagai berikut. Berikut ini hanya PICE1. Pembaca lain dapat mengimplementasikannya sendiri, atau melihat kode sumber GitHub saya
.piece-1 {latar belakang: #ff6666; -webkit-transform: rotate (0deg) translatez (173.2px); -MS-Transform: rotate (0deg) translatez (173.2px); -o-transform: rotate (0deg) translatez (173.2px); transformasi: rotate (0deg) translatez (173.2px); Animasi: Piece1Rotate 5S 5S; -Moz-animasi: Piece1Rotate 5S 5S; / * Firefox */ -webkit -animation: Piece1Rotate 5S 5S; / * Safari dan chrome */ -o -animasi: Piece1rotate 5s 5s; / * Opera */ -webkit-animation-fill-mode: ke depan; / * Chrome, safari, opera */ animasi-pengisian-mode: ke depan; }/*front*/ @keyframes PICE1Rotate {0% {-webkit-transform: rotatey (0deg) translateZ (173.2px); -MS-Transform: rotate (0deg) translatez (173.2px); -o-transform: rotate (0deg) translatez (173.2px); transformasi: rotate (0deg) translatez (173.2px);} 100% {-webkit-transform: rotate (0deg) translatez (100px); -MS-Transform: rotate (0deg) translatez (100px); -o-transform: rotate (0deg) translatez (100px); Transform: rotate (0deg) translatez (100px);}} / * firefox * / @-moz-keyframe piece1rotate {0% {-webkit-transform: rotate (0deg) translatez (100px);}} / * firefox * / @-moz-piecez (100px);}} / * firefox * / @-moz-keyfr (100px);}} / * firefox * / @-moz-keyfry rotate (0deg) translatez (173.2px); -MS-Transform: rotate (0deg) translatez (173.2px); -o-transform: rotate (0deg) translatez (173.2px); transformasi: rotate (0deg) translatez (173.2px);} 100% {-webkit-transform: rotate (0deg) translatez (100px); -MS-Transform: rotate (0deg) translatez (100px); -o-transform: rotate (0deg) translatez (100px); -o-transform: rotate (0deg) translatez (100px); transformasi: rotate (0deg) translatez (100px); transformasi: rotate (0deg) translatez (100px); translateZ (100px);}} / * safari dan chrome * / @-webkit-keyframes PICE1Rotate {0% {-webkit-transform: rotate (0deg) translatez (173.2px); -MS-Transform: rotate (0deg) translatez (173.2px); -o-transform: rotate (0deg) translatez (173.2px); transformasi: rotate (0deg) translatez (173.2px);} 100% {-webkit-transform: rotate (0deg) translatez (100px); -MS-Transform: rotate (0deg) translatez (100px); -o-transform: rotate (0deg) translatez (100px); Transform: rotatey (0deg) translateZ (100px);}} / * opera * / @-o-keyframes PICE1Rotate {0% {-webkit-transform: rotatey (0deg) translateZ (173.2px); -MS-Transform: rotate (0deg) translatez (173.2px); -o-transform: rotate (0deg) translatez (173.2px); -o-transform: rotate (0deg) translatez (173.2px); transformasi: rotate (0deg) translatez (173.2px);} 100% {-webkit-transform: rotate (0deg) translatez (100px); -MS-Transform: rotate (0deg) translatez (100px); -o-transform: rotate (0deg) translatez (100px); -o-transform: rotate (0deg) translatez (100px); Transform: rotate (0deg) translatez (100px);}}Pembaca yang cermat dapat menemukan bahwa saya menggunakan mode-pengisian animasi: ke depan;, yang sebenarnya untuk menjaga potongan-potongan ini dalam efek animasi akhir, yaitu efek kubus. Pembaca dapat mencobanya tanpa mencobanya, dan masih akan dikembalikan ke keadaan aslinya.
Akhirnya, kubus berputar. Wadah kami di depan telah menggunakan animasi. Pembaca mungkin berpikir bahwa saya dapat menambahkan kelas dan meletakkan animaiton. HHH, Animaiton akan menutupi bagian depan, dan animasi lentera depan akan hilang. Jadi dalam struktur HTML, saya menambahkan bagian pembungkus kotak lain, sebagai berikut
<dv> <div> <vet> <!-wadah baru-> <v div> </div> <div> </div> <div> </div> <biv> </div> <div> </div> <div> </div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div>
Dalam animasi, kita dapat mengontrol waktu tunda animasi kubus, yaitu, tunggu sampai perakitan kubus selesai sebelum memulai animasi
Animasi: Boxrotate 5s 10s Infinite; 5s pertama adalah durasi animasi, 10s kedua adalah waktu tunda, dan kemudian kami membiarkan kubus berputar, dari 0 derajat hingga 360 derajat di sekitar sumbu x, dan juga dari 0 hingga 360 derajat di sekitar sumbu Y.
.piece-box2 {-webkit-transform-style: preserve-3d; -Moz-Transform-style: cagar alam-3d; -MS-Transform-style: Preserve-3d; Transform-style: Preserve-3d; Animasi: Boxrotate 5s 10s Infinite; -Moz-animasi: Boxrotate 5s 10s Infinite; / * Firefox */ -webkit -animasi: boxrotate 5s 10s tak terbatas; / * Safari dan Chrome */ -o -animasi: Boxrotate 5s 10s Infinite; /*Opera*/}/*animasi rotasi cuboid*/@keyframes boxrotate {0% {-webkit-transform: rotatex (0deg) rotate (0deg);); -MS-Transform: rotatex (0deg) rotate (0deg);); -o-transform: rotatex (0deg) rotate (0deg););); transformasi: rotatex (0deg) rotate (0deg);););} 100% {-webkit-transform: rotatex (360deg) rotate (360deg); -MS-Transform: rotatex (360deg) rotate (360deg); -o-transform: rotatex (360deg) rotate (360deg); Transform: rotatex (360deg) rotate (360deg);}}/ * firefox */@-moz-keyframes boxrotate {0% {-webkit-transform: rotatex (0deg) rotate (0deg);); -MS-Transform: rotatex (0deg) rotate (0deg);); -o-transform: rotatex (0deg) rotate (0deg););); transformasi: rotatex (0deg) rotate (0deg);););} 100% {-webkit-transform: rotatex (360deg) rotate (360deg); -MS-Transform: rotatex (360deg) rotate (360deg); -o-transform: rotatex (360deg) rotate (360deg); Transform: rotatex (360deg) rotate (360deg);}}/ * safari dan chrome */@-webkit-keyframes boxrotate {0% {-webkit-transform: rotatex (0deg) rotate (0deg);); -MS-Transform: rotatex (0deg) rotate (0deg);); -o-transform: rotatex (0deg) rotate (0deg);); rotatex (0deg) rotate (0deg);); transformasi: rotatex (0deg) rotate (0deg););} 100% {-webkit-transform: rotatex (360deg) rotate (360deg); -MS-Transform: rotatex (360deg) rotate (360deg); -o-transform: rotatex (360deg) rotate (360deg); Transform: rotatex (360deg) rotate (360deg);}}/ * opera */@-o-keyframes boxrotate {0% {-webkit-transform: rotatex (0deg) rotate (0deg);); -MS-Transform: rotatex (0deg) rotate (0deg);); -o-transform: rotatex (0deg) rotate (0deg);); transformasi: rotatex (0deg) rotate (0deg);););} 100% {-webkit-transform: rotatex (360deg) rotate (360deg); -MS-Transform: rotatex (360deg) rotate (360deg); -o-transform: rotatex (360deg) rotate (360deg); Transform: Rotatex (360deg) Rotate (360deg);}}Efek terakhir selesai!
Di atas adalah contoh implementasi CSS 3D. Siswa yang membutuhkan dapat merujuknya. Terima kasih atas dukungan Anda untuk situs ini!