Tingkatkan penggunaan perspektif dan transformasi: translatez. Tampilan produk tradisional mungkin tidak menarik perhatian pengguna dengan baik, tetapi jika elemen 3D yang tepat ditambahkan ke layar, mungkin efeknya bagus ~
Efek Peta:
Jelaskan: Kreativitas ini bukan apa yang saya pikirkan, ha ~ meniru orang lain, kreativitas harus ada di W3Cplus. Tentu saja, intinya adalah mengajari semua orang bagaimana melakukannya, jadilah imitasi tinggi ~
Pertama -tama, ajari Anda menggunakan CSS3 untuk membuat kuadrat:
Sebelum ada CSS, kubus seperti itu harus sulit dibuat ~ yah, saya pikir itu sulit ~
html:
<body> <v class = wapper> <div class = cube> <div class = tanda dari> 1 </div> <div class = size back> 6 </div> <div class = tanda kanan> 4 </div </div> <div class = size left> 3 </div> <div class = size Top> 5 </div> <div class = tanda bagian bawah> 2 </div> </div> </body>
Tahap Wapper untuk efek ini, yaitu mengatur elemen perspektif. Kubus mewakili kubus, dan kemudian 6 div mewakili masing -masing sisi.
Div#Cube Settings Transform-style: cagar
Sekarang semua mie tumpang tindih pada pesawat yang sama, kami menyerah:
Font bergerak maju, jarak semi -margin (50px) dari arah z -axis adalah 50px;
Kembali pertama -tama berputar 180 derajat di sekitar sumbu y, sehingga font ke luar, dan kemudian menerjemahkanz (50px), karena telah diputar 180 derajat pada saat ini, sehingga Tanslatez turun, dan turun, dan ia turun turun.
Dengan cara yang sama, bidang lain berputar 90 derajat di sekitar sumbu x -axis atau y, dan kemudian menerjemahkanz (50px)
CSS:
.Wapper {Margin: Auto 0px 0; ; Tinggi: 100px; ;} .top {-webkit -transform: rotatex (90deg) translatez (50px);}. 90deg) translatez (50px);} .bottom {-webkit-transform: rotatex (-90deg) translatez (50px);} .back {-webkit-transform: rotate (-180deg) (50px);}Untuk efek tampilan, Anda dapat menyesuaikan jarak perspektif ~
Nah, kubus dipahami, jadi tampilan produk ini tidak sulit; dua div mewakili dua tempat, satu adalah gambar, dan yang lainnya adalah pengantar.
Html:
<! > <ul id = content> <li> <div class = wrapper> <img src = gambar/a.png> <span class = Information> <strong> kontrak </strong> dengan cara easiet. </span> </div> </li> <li> <div class = wrapper> <img src = gambar/b.jpeg> <span class = informasi> <strong> formulir </strong> cara termudah untuk Tambahkan Formulir Kontal ke Toko Anda. </strong> Cara termudah untuk menambahkan formulir kontak ke toko Anda.
CSS:
<Type style = text/css> body {font-family: tahoma, arial;} #content {margin: 100px auto 0;} #content li, #content .wrapper, #content li img, #contententit li span {width: 310PX; 888888;*/} #content .wrapper {posity: terkait: -webkit-transform-style: preserve-3d; 3px; : -webkit-gradient (linier, atas kiri, bawah kiri, color-stop (0%, RGBA (236, 241, 244, 1)), color-stop (100%, RGBA (190, 202, 217, 1 1 , 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 117, 1 1, 117, 1 1, 1 1, 117, 1 1, 1 1, 1 1, 117, 1 1, 1 1 1 , 117, 1 1, 1 1, 1 1, 1 1, 1 1, 117, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 1, 117, 1))); 6s; 255, 255, 255, 0.5); Transform: rotatex (95deg);} #content li: hover img {box-shadow: tidak ada; , 0.3);CSS pada dasarnya telah dianalisis di atas. Izinkan semua tahap berbagi produk, jadi kami menambahkan div.wapper baginya untuk mengatur transformasi-syle: Levers-3D, dan kemudian mengatur perspektif efek panggung masing-masing LI. Efek flip terakhir benar -benar pada div.wapper.
Kode Sumber Klik untuk Mengunduh
Di atas adalah semua isi artikel ini.