Menggambar Animasi 3D Cube Dengan Transformasi CSS3

Pada artikel ini saya akan mengajari Anda cara menggambar kubus dengan transisi CSS3. Kami akan dapat memutar kubus dengan animasi keyframes dan JavaScript. Lihat contoh di bawah ini.

Kubus animasi menggunakan keyframe CSS

Demo Langsung

Di bawah ini Anda dapat melihat tes versi skrip. Klik tombol rotasi untuk melihat belokan animasi.

Kode HTML

Yang Anda butuhkan hanyalah pembungkus dan elemen div untuk setiap sisi. Di bawah kubus saya menambahkan tautan untuk mengontrol rotasi kubus.

< div  id = "wrapD3Cube" > 
    < div  id = "D3Cube" > 
        < div  id = "side1" > </ div > 
        < div  id = "side2" > </ div > 
        < div  id = "side3" > </ div > 
        < div  id = "side4" > </ div > 
        < div  id = "side5" ></ div > 
        < div  id = "side6" > </ div > 
    < / div > 
</ div > 
< p  style = "text-align: center;" > 
    <  a > 
    < a  onclick = "turnRight ()" > kanan </ a >  < br /> 
    < a  onclick = "flipCube ()" > Balik <
>

Gaya CSS

Saya mewarnai objek sesuai dengan skema warna Rubik's Cube dan mengatur opacity sedikit. Keenam sisi kubus diposisikan dengan properti transform.

# wrapD3Cube {
     width : 250 px ;
    tinggi : 213 px ;
    margin : 20 px  otomatis ;
    warna latar : #EEE ;
}
# D3Cube {
     width : 112 px ;
    tinggi : 112 px ;
    atas : 50 px ;
    transform-style: melestarikan -3 d;
    -moz-transform-style: preservate -3 d;
    -webkit-transform-style: preservate -3 d;
    transform: rotateX ( -22 deg ) rotateY ( -38 deg ) rotateZ ( 0 deg );
    -moz-transform: rotateX ( -22 deg ) rotateY ( -38 deg ) rotateZ ( 0 deg );
    -webkit-transform: rotateX ( -22 deg ) rotateY ( -38 deg ) rotateZ ( 0 deg );
    margin : otomatis ;
    posisi : relatif ;
    -moz-transform-style: preservate -3 d;
    transform-style: melestarikan -3 d;
    -webkit-transisi: semua  kemudahan 0,5 s ;
    transisi: semua  kemudahan 0,5 s ;
}
# D3Cube > div {
     position : absolute ;
    -webkit-transisi: semua  kemudahan 0,5 s ;
    transisi: semua  kemudahan 0,5 s ;
    lebar : 112 px ;
    tinggi : 112 px ;
    mengapung : kiri ;
    overflow : disembunyikan ;
    opacity : 0,85 ;
}
# side1 {
    transform: rotatex ( 90 deg ) translateX ( 0 px ) translateY ( 0 px ) translateZ ( 56 px );
    -moz-transform: rotatex ( 90 deg ) translateX ( 0 px ) translateY ( 0 px ) translateZ ( 56 px );
    -webkit-transform: rotatex ( 90 deg ) translateX ( 0 px ) translateY ( 0 px) ) translateZ ( 56 px );
    warna latar : #FFF ;
}
# side2 {
    transform: rotateY ( -90 deg ) translateX ( 0 px ) translateY ( 0 px ) translateZ ( 56 px );
    -moz-transform: rotateY ( -90 deg ) translateX ( 0 px ) translateY ( 0 px ) translateZ ( 56 px );
    -webkit-transform: rotateY ( -90 deg ) translateX ( 0 px ) translateY ( 0 px ) translateZ ( 56 px );
    warna latar : # ffaf1c ;
}
# side3 {
    transform: translateX ( 0 px ) translateY ( 0 px ) translateZ ( 56 px );
    -moz-transform: translateX ( 0 px ) translateY ( 0 px ) translateZ ( 56 px );
    -webkit-transform: translateX ( 0 px ) translateY ( 0 px ) translateZ ( 56 px );
    warna latar : # 58d568 ;
}
# side4 {
    transform: rotateY ( 90 deg ) translateX ( 0 px ) translateY ( 0 px ) translateZ ( 56 px );
    -moz-transform: rotateY ( 90 deg ) translateX ( 0 px ) translateY ( 0 px ) translateZ ( 56 px );
    -webkit-transform: rotateY ( 90 deg ) translateX ( 0 px ) translateY ( 0 px ) translateZ ( 56 px );
    warna latar : # ed3030 ;
}
# side5 {
    transform: rotateY ( 180 deg ) translateX ( 0 px ) translateY ( 0 px ) translateZ ( 56 px );
    -moz-transform: rotateY ( 180 deg ) translateX ( 0 px ) translateY ( 0 px ) translateZ ( 56 px );
    -webkit-transform: rotateY ( 180 deg ) translateX ( 0 px ) translateY ( 0 px ) translateZ ( 56 px );
    warna latar : # 1c5ffe ;
}
# side6 {
    transform: rotateX ( -90 deg ) translateX ( 0 px ) translateY ( 0 px ) translateZ ( 56 px );
    -moz-transform: rotateX ( -90 deg ) translateX ( 0 px ) translateY ( 0 px ) translateZ ( 56 px );
    -webkit-transform: rotateX ( -90 deg ) translateX ( 0 px ) translateY ( 0 px ) translateZ ( 56 px );
    warna latar : # f2f215 ;
}

Naskah

Script memanipulasi nilai rotateX, rotateY dan rotateZ dari properti transformasi CSS:

var cubex =  - 22 ,     // 
cubey rotasi awal =  - 38 ,
cubez =  0 ;rotate 
fungsi (variableName, derajat) {
     jendela [variableName] =  jendela [variableName] + derajat;
    rotCube (cubex, cubey, cubez);
}
fungsi rotCube (degx, degy, degz) {
    segs =  "rotateX (" + degx + "deg) rotateY (" + degy + "deg) rotateZ (" + degz + "deg) translateX (0) translateY (0) translateY (0) translateZ (0)" ;
    $ ( '# D3Cube' ) .css ({ "transform" : segs});
}
function turnRight () {
    rotate ( "cubey" , 90 );
}
fungsi turnLeft () {
    rotate ( "cubey" , - 90 );
}
fungsi flipCube () {
    putar ( "cubez" , - 180 );
}

Cube Rotation Animation With Keyframes

Memutar kubus dengan JavaScript bukan satu-satunya cara menjiwai kubus. Kita dapat menggunakan bingkai kunci CSS untuk mengatur animasi looping.

Dalam hal ini kita perlu menambahkan penyesuaian di bawah ini ke style sheet kita. Ini akan dengan lancar mengubah nilai rotateY. Mainkan dengan kode di JSFiddle .

# D3Cube {
    -webkit-animation: cubeRotation 5 s infinite; / * Safari 4.0 - 8.0 * / 
    animasi: cubeRotation 5 s infinite;
}
@ -webkit-keyframes cubeRotation {
    0% {-webkit-transform: rotateX ( -22 deg ) rotateY ( -38 deg ) rotateZ ( 0 deg ); }
    50% {-webkit-transform: rotateX ( -22 deg ) rotateY ( -128 deg ) rotateZ ( 0 deg ); }
    100% {-webkit-transform: rotateX ( -22 deg ) rotateY ( -398 deg ) rotateZ ( 0 deg ); }
}
@keyframes cubeRotation {
    0% {transform: rotateX ( -22 deg ) rotateY ( -38 deg ) rotateZ ( 0 deg ); }
    50% {transform: rotateX ( -22 deg ) rotateY ( -238 deg ) rotateZ ( 0 deg ); }
    100% {transform: rotateX ( -22 deg ) rotateY ( -398 deg ) rotateZ ( 0 deg ); }
}