Animasi Cubes 3D menggunakan CSS keyframe

HaiSob apa kabar 😊 ? semoga semua dalam keadaan baik. Pada kesempatan ini saya akan membagikan CSS Cubes 3D di blogspot.

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 @ keyframe.

Live Demo 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>

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.
Join This Site