Cara Menggambar Kubus pada Blog dengan CSS

Hey sobat kelasmat. Biasanya kalau sobat ingin membuat gambar kubus lebih enakan pakai software apa? Mungkin yang paling biasa dipakai untuk menggambar geometri ataupun kubus adalah geogebra. Namun bagaimana kalau kita ingin membuat nya di blog? Nah pada kesempatan kali ini saya tidak akan membahas cara membuat kubus dengan geogebra melainkan saya akan membuatnya hanya dengen menggunakan html dan css. Cara ini mungkin bisa berguna untuk membuat animasi atau simulasi untuk memperkenalkan kubus pada anak-anak karena lebih terlihat 3D. Sehingga anak-anak lebih mudah untuk memahami bentuk kubus maupun sifat-sifatnya.

Nah sebelum kita memulai membuat gambar kubus dengan menggunakan html dan CSS, coba perhatikan lebih dulu bentuk yang akan kita buat nantinya.

Demo Gambar Kubus 3D

Cara Membuat Gambar Kubus 3D

Bagaimana sobat? unyu-unyu kan?hehehe
Jika Tertarik untuk membuatnya, silahkan lanjutkan membacanya ya.

1. Langkah pertama, Create New Post - Siapkan kode HTML

Silahkan sobat buka dulu halaman untuk membuat postingannya. Kalau sudah, gunakan mode HTML / bukan yang compose. Tuliskan kode html seperti dibawah ini.

<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 onclick="turnLeft()">Left</a>
    <a onclick="turnRight()">Right</a> <br />
    <a onclick="flipCube()">Flip</a>
</p>

Langkah kedua. Siapkan kode CSS

Setelah itu, sobat tuliskan kode css nya seperti dibawah ini.

<style>
#wrapD3Cube {
    width: 250px;
    height: 213px;
    margin: 20px auto;
    background-color: #EEE;
}
#D3Cube {
    width: 112px;
    height: 112px;
    top: 50px;
    transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    -moz-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    -webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    margin: auto;
    position: relative;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
#D3Cube > div {
    position: absolute;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    width: 112px;
    height: 112px;
    float: left;
    overflow: hidden;
    opacity: 0.85;
}
#side1 {
    transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #FFF;
}
#side2 {
    transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #ffaf1c;
}
#side3 {
    transform: translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: translateX(0px) translateY(0px) translateZ(56px);
    background-color: #58d568;
}
#side4 {
    transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #ed3030;
}
#side5 {
    transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #1c5ffe;
}
#side6 {
    transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-color: #f2f215;
}
#D3Cube {
    -webkit-animation: cubeRotation 5s infinite; /* Safari 4.0 - 8.0 */
    animation: cubeRotation 5s infinite;
}
@-webkit-keyframes cubeRotation {
    0%   {  -webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);   }
    50%   { -webkit-transform: rotateX(-22deg) rotateY(-128deg) rotateZ(0deg);  }
    100%   {    -webkit-transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg);  }
}
@keyframes cubeRotation {
    0%   {  transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);   }
    50%   { transform: rotateX(-22deg) rotateY(-238deg) rotateZ(0deg);  }
    100%   {    transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg);  }
}
</style>

Setelah selesai, silahkan publish atau simpan.

Lankah ketiga, Tambahkan Script untuk mengatur putarannya.

Script ini bisa sobat letakkan dibawah postingan tadi, ataupun bisa juga sobat letakkan scriptnya di dalam tag <body>. Yang jelas peletakkan harus sebelum kode </body>

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

Semoga cara menggambar Kubus 3D dengan CSS ini bisa dipahami dengan mudah dan bisa bermanfaat.