CSS3 Transform 3D Menggunakan CSS3 Untuk Membuat Kubus 3D Dinamis (Praktek HTML5)

Dalam kursus hari ini, saya akan memperkenalkan Anda tentang cara membuat kubus 3D menggunakan CSS3. Anda dapat menelusuri efek aktual melalui tautan di bawah ini, mengoperasikan tombol kiri dan bawah dan kanan untuk mencapai efek flip dari kubus.

Mari kita mulai dengan cara membuatnya.

<Div id = "Eksperimen">

<Div id = "Cube">

<div>

Satu wajah

</div>

<div>

Naik, turun, kiri, kanan

</div>

<div>

Lorem ipsum.

</div>

<div>

Bentuk navigasi baru itu menyenangkan.

</div>

<div>

Rotating 3D Cube

</div>

<div>

Lebih banyak konten

</div>

</div>

</div>

Dalam HTML di atas, 6 Divs dengan kelas sebagai wajah mewakili 6 wajah kubus, dan mereka dibedakan menggunakan nama kelas dari satu hingga enam. Wadah eksternal berisi dua lapisan wadah dengan ID Cube dan Eksperimen. Kedua lapisan itu diperlukan. Tanpa siapa pun, efek 3D tidak dapat diproduksi.

Di antara mereka, percobaan memainkan peran lensa. Atur panjang fokus ke dalamnya sehingga efek 3D dapat ditampilkan pada elemen internal.

Atribut perspektif mendefinisikan kedalaman bidang sumbu-z, dan juga mendefinisikan dimensi relatif elemen di atas dan di bawah bidang. Secara umum, semakin kecil nilai perspektif, semakin besar objek, semakin dekat dengan Anda; Semakin besar nilai perspektif, semakin kecil objek, semakin jauh dari Anda. Anda dapat melihat efeknya melalui http://www.webkit.org/blog-files/3d-transforms/perspektif-by-example.html.

Properti perspektif-asal mendefinisikan asal perspektif.

#Experiment {

-webkit-perspektif: 800;

-Moz-perspektif: 800;

-o-perspektif: 800;

Perspektif: 800;

-webkit-perspektif-asal: 50% 200px;

-Moz-perspektif-asal: 50% 200px;

-o-perspektif-asal: 50% 200px;

Perspektif-asal: 50% 200px;

}

Properti yang ditetapkan oleh kubus berisi lebar dan tinggi tetap, dan mengatur posisi ke relatif. Tinggi dan lebar tetap diperlukan sehingga elemen dalam kubus dapat melakukan animasi 3D dalam area yang ditentukan. Jika Anda mengatur tinggi dan lebar hingga 100%, elemen -elemen dalam kubus akan bergerak melintasi seluruh rentang halaman.

Transisi digunakan untuk mengatur properti terkait animasi. Transform-style: Preserve-3d; Membuat semua elemen dalam kubus menghasilkan efek 3D secara keseluruhan.

Anda dapat menelusuri http://www.zhangxinxu.com/wordpress/2012/09/css3/">Css3-3d-transform-perspection-animate-transition/ untuk informasi lebih lanjut.

CSS:

#cube {

Posisi: kerabat;

Margin: 100px Auto;

Tinggi: 400px;

Lebar: 400px;

-webkit-transisi: -webkit-transform 2s linear;

-Moz-transisi: -Moz-transform 2s linear;

-O-transisi: -o-transform 2s linear;

Transisi: Transform 2s Linear;

-webkit-transform-style: cagar alam-3d;

-Moz-Transform-style: cagar alam-3d;

-o-transform-style: cagar alam-3d;

Transform-style: Preserve-3d;

}

Selanjutnya, atur atribut CSS untuk 6 wajah kubus.

.menghadapi {

Posisi: Absolute;

Tinggi: 360px;

Lebar: 360px;

padding: 20px;

latar belakang-warna: RGBA (50, 50, 50, 0,7);

}

Selanjutnya, atur sifat terkait 3D dari 6 wajah, gunakan rotatex atau rotate untuk mencapai flip permukaan kubus, dan gunakan translateZ untuk mencapai pergerakan permukaan kubus dalam ruang 3 dimensi.

#cube .one {

-webkit-transform: rotatex (90deg) translatez (200px);

-Moz-Transform: Rotatex (90deg) TranslateZ (200px);

-o-transform: rotatex (90deg) translatez (200px);

Transformasi: Rotatex (90deg) TranslateZ (200px);

}

#cube .two {

-webkit-transform: translatez (200px);

-Moz-Transform: TranslateZ (200px);

-o-transform: TranslateZ (200px);

Transform: TranslateZ (200px);

}

#cube. Three {

-webkit-transform: rotate (90deg) translatez (200px);

-Moz-Transform: Rotatey (90deg) TranslateZ (200px);

-o-transform: rotate (90deg) translatez (200px);

Transformasi: Rotatey (90deg) TranslateZ (200px);

}

#cube .four {

-webkit-transform: rotatey (180deg) translatez (200px);

-Moz-Transform: Rotatey (180deg) TranslateZ (200px);

-o-transform: rotate (180deg) translatez (200px);

Transformasi: Rotatey (180deg) TranslateZ (200px);

}

#cube .five {

-webkit-transform: rotate (-90deg) translatez (200px);

-Moz-transform: rotate (-90deg) translatez (200px);

-o-transform: rotate (-90deg) translatez (200px);

Transformasi: rotate (-90deg) translatez (200px);

}

#cube .six {

-webkit-transform: rotatex (-90deg) translatez (200px);

-Moz-Transform: rotatex (-90deg) translatez (200px);

-o-transform: rotatex (-90deg) translatez (200px);

Transform: rotatex (-90deg) translatez (200px);

}

Hal terakhir yang harus dilakukan adalah mengikat acara Keydown ke halaman, sehingga ketika Anda menekan tombol atas, bawah, kiri dan kanan, efek gerak flip cube tercapai.

Javascript:

var xangle = 0, yangle = 0;

Document.addeventListener ('KeyDown', Function (E)

{

sakelar (E.KeyCode)

{

case 37: // tersisa

Yangle -= 90;

merusak;

Kasus 38: //

xangle += 90;

merusak;

Kasus 39: // Benar

yangle += 90;

merusak;

Kasus 40: // Down

xangle -= 90;

merusak;

};

$ ('cube'). style.webkittransform = "rotatex ("+xangle+"deg) rotate ("+yangle+"deg);

}, PALSU);

Itu saja untuk kursus, Anda dapat mencobanya selanjutnya.