Pada kesempatan ini saya akan membagikan cara membuat / menampilkan animasi CSS Cubes 3D di Blogger. CSS selalu menjadi pilihan terbaik buat berekspresi dan sangat menantang untuk mencobanya. Dan berikut ini adalah CSS 3D Cubes yang terinspirasi dari Denzdii Gn.

Penggunaan CSS akan erat sekali dengan peran CSS-Transform. untuk menghasilkan perputaran efek animasi. Mungkin bisa sebagai pelajaran untuk membuat coding CSS Animation menggunakan CSS transform.

Animasi Cubes 3D menggunakan CSS keyframe
CSS Cubes 3D 

CSS Cubes 3D


#viewport { background-color:#000000; width:600px; height:350px; margin:0 auto; position:relative; -webkit-perspective:700px; -webkit-perspective-origin:50% 50%; -moz-perspective:700px; -moz-perspective-origin:50% 50%; -ms-perspective:700px; -ms-perspective-origin:50% 50%; }
.cube { position:absolute; left:50%; top:50%; margin-left:-50px; margin-top:-50px; width:100px; height:100px; -webkit-animation:test 5s infinite; -webkit-transform-origin:50% 50%; -webkit-transform-style:preserve-3d; -moz-animation:test 5s infinite; -moz-transform-origin:50% 50%; -moz-transform-style:preserve-3d; -ms-animation:test 5s infinite; -ms-transform-origin:50% 50%; -ms-transform-style:preserve-3d; }
@-webkit-keyframes test {
    0% { -webkit-transform:rotateX(0deg) rotateY(-45deg); } 50% { -webkit-transform:rotateX(90deg) rotateY(315deg); } 100% { -webkit-transform:rotateX(180deg) rotateY(-45deg); }
}
@-moz-keyframes test {
    0% { -moz-transform:rotateX(0deg) rotateY(-45deg); } 50% { -moz-transform:rotateX(90deg) rotateY(315deg); } 100% { -moz-transform:rotateX(180deg) rotateY(-45deg); }
}
@-ms-keyframes test {
    0% { -ms-transform:rotateX(0deg) rotateY(-45deg); } 50% { -ms-transform:rotateX(90deg) rotateY(315deg); } 100% { -ms-transform:rotateX(180deg) rotateY(-45deg); }
}
.cube .plain { position:absolute; display:block; content:""; width:100px; height:100px; background:rgba(0,0,0,0.75); border:2px dashed #fff; -webkit-box-sizing:border-box; -webkit-transform-origin:50% 50%; -webkit-transform-style:flat; -webkit-animation:bordercolor 5s infinite; -moz-box-sizing:border-box; -moz-transform-origin:50% 50%; -moz-transform-style:flat; -moz-animation:bordercolor 5s infinite; -ms-box-sizing:border-box; -ms-transform-origin:50% 50%; -ms-transform-style:flat; -ms-animation:bordercolor 5s infinite; }
@-webkit-keyframes bordercolor {
    0% { border-color:#0cf; } 50% { border-color:#fff; } 100% { border-color:#0cf; }
}
@-moz-keyframes bordercolor {
    0% { border-color:#0cf; } 50% { border-color:#fff; } 100% { border-color:#0cf; }
}
@-ms-keyframes bordercolor {
    0% { border-color:#0cf; } 50% { border-color:#fff; } 100% { border-color:#0cf; }
}
.cube .plain:nth-child(1) { -webkit-transform:rotateY(-90deg) translate3d(0,0,100px); -moz-transform:rotateY(-90deg) translate3d(0,0,100px); -ms-transform:rotateY(-90deg) translate3d(0,0,100px); }
.cube .plain:nth-child(2) { -webkit-transform:rotateY(90deg) translate3d(0,0,100px); -moz-transform:rotateY(90deg) translate3d(0,0,100px); -ms-transform:rotateY(90deg) translate3d(0,0,100px); }
.cube .plain:nth-child(3) { -webkit-transform:rotateX(-90deg) translate3d(0,0,100px); -moz-transform:rotateX(-90deg) translate3d(0,0,100px); -ms-transform:rotateX(-90deg) translate3d(0,0,100px); }
.cube .plain:nth-child(4) { -webkit-transform:rotateX(90deg) translate3d(0,0,100px); -moz-transform:rotateX(90deg) translate3d(0,0,100px); -ms-transform:rotateX(90deg) translate3d(0,0,100px); }
.cube .plain:nth-child(5) { -webkit-transform:rotateX(180deg) translate3d(0,0,100px); -moz-transform:rotateX(180deg) translate3d(0,0,100px); -ms-transform:rotateX(180deg) translate3d(0,0,100px); }
.cube .plain:nth-child(6) { -webkit-transform:translate3d(0,0,100px); -moz-transform:translate3d(0,0,100px); -ms-transform:translate3d(0,0,100px); }

HTML Cubes 3D


<div id="viewport">
    <div class="cube">
        <div class="plain">
        </div>
        <div class="plain">
        </div>
        <div class="plain">
        </div>
        <div class="plain">
        </div>
        <div class="plain">
        </div>
        <div class="plain">
        </div>
    </div>
</div>

Live Demo:




Penggunaan CSS akan erat sekali dengan peran CSS-Transform. untuk menghasilkan perputaran efek animasi. Mungkin bisa sebagai pelajaran untuk membuat coding CSS Animation menggunakan CSS transform @ keyframe.
0 Komentar untuk "Animasi Cubes 3D Menggunakan CSS"