Tujuan dari blog ini adalah karena instance menggoda dari HTML5 CSS3 CHECTICE CONTER CSS3 menciptakan efek flop 3D dari Tieba Baidu.
Bagan Efek: Hei, saya membuat beberapa foto kelulusan perguruan tinggi menjadi Trojan putar, berputar di sekitar teks besar saya, dan rahmat budidaya almamater saya ~
1. PerspektifAtribut perspektif mencakup dua atribut: tidak ada dan panjang unit.
Di antara mereka, nilai default atribut perspektif tidak ada, yang berarti bahwa objek 3D dilihat pada sudut yang tidak terbatas, tetapi terlihat datar. Nilai lain <langth> menerima nilai unit yang lebih besar dari 0. Dan unitnya tidak bisa persentase. Semakin besar nilai <langth>, semakin jauh sudutnya muncul, sehingga menciptakan kekuatan yang cukup rendah dan perubahan ruang 3D yang sangat kecil. Sebaliknya, semakin kecil nilai ini, semakin dekat sudut, semakin dekat, sehingga membuat sudut intensitas tinggi dan perubahan 3D yang besar. Sederhananya: Ketika pengaturan perspektif diatur, semakin kecil itu berarti bahwa semakin jelas efek 3D, semakin dekat mata Anda lebih dekat ke objek 3D, dan sebaliknya.
2. Transform: Translasi (panjang)Dengan asumsi bahwa ketika Anda menetapkan perspektif: 300px, semakin kecil nilai translatez ditetapkan, semakin kecil ukuran elemen anak.
Inti dari contoh di atas:1. Pertama -tama, wadah semua gambar adalah posisi: absolut, ditumpangkan bersama, dan kemudian atur rotatey pada waktu ke 40*i, i = 0, 1, 2 ... 9;
2. Lalu atur translatez untuk setiap gambar wadah.
html:
<! Teks/JavaScript src = ../../ jQuery-1.8.3.js> </script> <script type = text/javascript> // waspada (64/math.tan (20/180 * math.pi)) ); ; deg *] i ++)+deg))})});}); </script> </head> <body> <div id = stage> <ul container> <li> <img src = img /1.jpg/> <span> Lakukan satu hal pada satu waktu, dan lakukan dengan baik .. </span> </li> <li> <img src = img/2.jpg/> <span> Lakukan satu hal di waktu, dan lakukan dengan baik > <Img src = img // 4.jpg/> <span> apa yang dilakukan kata adalah kata yang baik. Keamanan Anda. Li> <li> <img src = img/7.jpg/> <span> tidak pernah menempatkan kantor yang dapat Anda lakukan hari ini sampai besok. > <span> jack dari semua trand dan master of none > </div> </body> </html "
CSS:
Li {Width: 128px; 0, 0, .5); {wid TH: 900px; JPG) No-Repeat 0 0; -Transisi -Webkit-Transform 1s; (0deg) translateZ (300px);} li: nth-child (1) {-webkit-transform: rotate (40deg) translatez (300px);} li: nth-child (2) {-webkit-transform: rotat ey ( 80deg) translatez (300px);} li: nth-child (3) {-webkit-transform: rotatey (120deg) translatez (300px);} li: nth-child (4) {-webkit-transform: 16 0deg) (300px);} li: nth-child (5) {-webkit-traansform: rotatey (200deg) translatez (300px);} li: nth-child (6) {-webkit-transform: rotate (240deg) terjemahan ATEZ ( 300px);} li: nth-child (7) {-webkit-transform: rotatey (280deg) translatez (300px);} li: nth-child (8) {-webkit-transform: rotate (300px);} li: nth-child (9) {-webkit-transform: rotatey (360deg) translatez (300px);}Div#Stage, menetapkan perspektif, setiap Li menetapkan Rotatey, dan TranslateZ; Nilai default, itu berarti bahwa semua sub -elemen disajikan dalam bidang 2D. Preserve-3D menunjukkan bahwa semua sub-elemen disajikan dalam ruang 3D. Jika nilai gaya transformasi diatur ke cagar alam pada elemen, itu menunjukkan bahwa ia tidak melakukan operasi pameran datar, dan semua sub-elemennya terletak di ruang 3D. Dalam keadaan normal, atribut ini digunakan untuk elemen eksekusi efek animasi 3D, yaitu menggunakan efek animasi 3D, sehingga sub -elemennya harus dalam ruang 3D.
Satu hal yang harus diperhatikan: Dalam contoh ini, efek animasi sebenarnya adalah klik mouse. Ini untuk memutar trojan ini, jadi Anda hanya perlu mengubah sudut 40 rotatey dari wadah div#setiap kali.
Di atas adalah semua isi artikel ini.