Rumah > Artikel > hujung hadapan web > css3 transform 3d Gunakan css3 untuk mencipta kiub 3d dinamik (latihan HTML5)_html5 kemahiran tutorial

css3 transform 3d Gunakan css3 untuk mencipta kiub 3d dinamik (latihan HTML5)_html5 kemahiran tutorial

WBOYasal: 2016-05-16 15:50:371215semak imbas

Dalam kursus hari ini, saya akan memperkenalkan kepada anda cara menggunakan css3 untuk mencipta kiub 3D. Anda boleh menyemak imbas kesan sebenar melalui pautan di bawah, dan mengendalikan kekunci atas, bawah, kiri dan kanan untuk mencapai kesan flip kiub.
Alamat demo: http://www.jb51.net/jiaoben/70022.html
Mari kita mulakan dengan cara membuatnya.
html:

Salin kod

Kod adalah seperti berikut:

>
Lorem ipsum

Kubus 3D berputar

/div>

Dalam html di atas, masing-masing 6 div dengan muka kelas, menggunakan kelas daripada satu hingga enam Nama membezakannya. Bahagian luar mengandungi dua lapisan bekas dengan ID kubus dan percubaan Kedua-dua lapisan adalah perlu Tanpa salah satu, kesan 3D tidak boleh dihasilkan.
Percubaan memainkan peranan sebagai kanta. Tetapkan fokus padanya supaya kesan 3D ditunjukkan pada elemen dalaman. Atribut
perspektif mentakrifkan kedalaman satah paksi z dan juga mentakrifkan saiz relatif elemen di atas dan di bawah satah. Secara umum, lebih kecil nilai perspektif, lebih besar objek dan lebih dekat dengan anda; lebih besar nilai perspektif, lebih kecil objek dan lebih jauh dari anda. Anda boleh menyemak kesannya di http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html.
Atribut asal-perspektif mentakrifkan asal-usul perspektif.

css
:

Salin kod

Kodnya adalah seperti berikut:

#eksperimen {

-perspektif webkit: 800;

-perspektif moz: -o-perspektif: 800; -perspektif- asal: 50% 200px; -moz-perspektif-asal: 50% 200px; >}

Sifat yang ditetapkan oleh kubus mengandungi lebar dan tinggi tetap, dan kedudukan ditetapkan kepada relatif. Ketinggian dan lebar tetap diperlukan supaya elemen dalam kubus boleh melakukan animasi 3D dalam kawasan terhad. Jika anda menetapkan ketinggian dan lebar kepada 100%, unsur-unsur dalam kubus akan bergerak ke seluruh halaman.

Peralihan digunakan untuk menetapkan atribut berkaitan animasi. transform-style: preserve-3d; menyebabkan semua elemen dalam kubus menghasilkan kesan 3D secara keseluruhan.

Anda boleh melayari http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ untuk mendapatkan maklumat lanjut.
css:

Salin kod

Kodnya adalah seperti berikut:

# kubus {
kedudukan: relatif;
margin: 100px auto;
tinggi: 400px; moz-transition : -moz-transform 2s linear;
-o-transition: -o-transform 2s linear; 🎜>- moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;

transform-style: preserve-3d; >Seterusnya Tetapkan sifat css secara seragam untuk 6 muka kubus.

css:

Salin kod

Kodnya adalah seperti berikut:

.muka {
kedudukan: mutlak;
tinggi: 360px;
lebar: 360px; , 0.7) ;
}

Seterusnya, tetapkan atribut berkaitan 3D bagi enam muka, gunakan rotateX atau rotateY untuk membalikkan orientasi permukaan kubus dan gunakan translateZ untuk menggerakkan permukaan kubus dalam ruang 3D.

css
:

Salin kod

Kodnya adalah seperti berikut:

#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);
}
#kiub .dua {
-webkit-transform: translateZ(200px);
-moz-transform: translateZ(200px);
-o-transform: translateZ(200px);
transformasi: translateZ(200px);
}
#kiub .tiga {
-webkit-transform: rotateY(90deg) translateZ(200px);
-moz-transform: rotateY(90deg) translateZ(200px);
-o-transform: rotateY(90deg) translateZ(200px);
transformasi: rotateY(90deg) translateZ(200px);
}
#cube .four {
-webkit-transform: rotateY(180deg) translateZ(200px);
-moz-transform: rotateY(180deg) translateZ(200px);
-o-transform: rotateY(180deg) translateZ(200px);
transformasi: rotateY(180deg) translateZ(200px);
}
#kiub .lima {
-webkit-transform: rotateY(-90deg) translateZ(200px);
-moz-transform: rotateY(-90deg) translateZ(200px);
-o-transform: rotateY(-90deg) translateZ(200px);
transformasi: rotateY(-90deg) translateZ(200px);
}
#cube .enam {
-webkit-transform: rotateX(-90deg) translateZ(200px);
-moz-transform: rotateX(-90deg) translateZ(200px);
-o-transform: rotateX(-90deg) translateZ(200px);
transformasi: rotateX(-90deg) translateZ(200px);
}

最后要做的是为页面绑定keydown事件，这样当你按下上下左右右甮的簴左右键翻转运动效果。
javascript：

复制代码

代码如下:

var xAngle = 0, yAngle
document.addEventListener('keydown', function(e)
{
switch(e.keyCode)
{
case 37: // left
yAngle -= 90;
pecah;
kes 38: // atas
xAngle = 90;
kes 39: // kanan
ySudut = 90; 40: // bawah
xAngle -= 90;
break;
};
$('cube').style.webkitTransform = "rotateX(" xAngle "deg) rotateY(" yAngle " deg)";
}, palsu);

课程就讲到这里，接下来大家可以动手尝试一下。

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Cara menggunakan html5 dan css3 untuk melengkapkan animasi grafiti googleArtikel seterusnya：Cara menggunakan html5 dan css3 untuk melengkapkan animasi grafiti google

Artikel berkaitan

Lihat lagi