Membuat kubus menggunakan CSS3

Kubus adalah bangun ruang tiga dimensi yang dibatasi oleh enam bidang sisi yang berbentuk bujur sangkar. Kubus memiliki 6 sisi, 12 rusuk dan 8 titik sudut. Kubus juga disebut bidang enam beraturan, selain itu juga merupakan bentuk khusus dalam prisma segiempat.

Disini kita akan menjelaskan sekaligus mempraktikan cara membuat kubus dengan menggunakan CSS.

Terbatas hanya sampai 30 April 2018 Paket Lengkap Mahir Web Development Bangun 5 (jenis) Project Website + Mahir Membuat Aplikasi Android (4 Project + Upload Playstore)

Hanya Rp 127.000 (Total 4 DVD). Dibuat oleh praktisi yang memiliki pengalaman lebih dari 10 tahun di bidang web development (Pemesanan bisa SMS/WA ke 0838 1157 5876, atau bisa pesan secara online di sini)

Pertanyaanya, memang bisa Membuat Kubus Menggunakan CSS3?

Jelas bisa, disini kita akan membuat suatu bidang enam beraturan yang dinamakan kubus, yaitu dengan menggunakan CSS.

Yang harus dilakukan, Pertama-tama buat terlebih dahulu script dasar html-nya, seperti ini:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>MEMBUAT KUBUS</title>
<style type="text/css">
/* property CSS disini */
</style>
</head>
<body>
<!—Tag HTML disini -->
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>MEMBUAT KUBUS</title>

/* property CSS disini */

</style>

</head>

<body>

<!—Tag HTML disini -->

</body>

</html>

Kita akan membuat seperti gambar dibawah ini.

Gimana buatnya tuh?

Tanpa pikir panjang, bias langsung di copas(copy paspasan) aja brow :-)

Yaitu scriptnya seperti ini..

Ets tunggu dulu, script ini hanya akan terbaca oleh webroser (mozilla v. 3.5+, chrome v. 3.0+, safari v. 3.2+, Internet Exploler v. 9+, Opera v. 10.5+), kalau web broser yang anda pakai ga bisa menampilkan seperti yang di inginkan, maka Updatekan webros anda :-D

Dan script untuk membuatnya seperti ini:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>MEMBUAT KUBUS</title>
<style type="text/css">
body{
padding:30px 0 0 50px;
}
.box1, .box2, .box3, .box4, .box5, .box6{
opacity:.8;
background:#000;
}
.box1, .box6{
width:199px;
height:74px;
position:absolute;
margin-left:31px;
-moz-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(40deg, 0deg);
-webkit-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(40deg, 0deg);
-o-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(40deg, 0deg);
-ms-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(40deg, 0deg);
transform: scale(1) rotate(0deg) translate(0px, 0px) skew(40deg, 0deg);
}
.box2, .box5{
width:62px;
height:199px;
position:absolute;
margin-top:38px;
-moz-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 50deg);
-webkit-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 50deg);
-o-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 50deg);
-ms-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 50deg);
transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 50deg);
}
.box3, .box4{
width:199px;
height:199px;
position:absolute;
margin-top:0;
}
.box4{
margin:75px 0 0 63px;
border:0;
}
.box5{
margin-left:200px;
border:0;
}
.box6{
margin-top:200px;
border:0;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
 
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>MEMBUAT KUBUS</title>

body{

padding:30px 0 0 50px;

}

.box1, .box2, .box3, .box4, .box5, .box6{

opacity:.8;

background:#000;

}

.box1, .box6{

width:199px;

height:74px;

position:absolute;

margin-left:31px;

-moz-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(40deg, 0deg);

-webkit-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(40deg, 0deg);

-o-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(40deg, 0deg);

-ms-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(40deg, 0deg);

transform: scale(1) rotate(0deg) translate(0px, 0px) skew(40deg, 0deg);

}

.box2, .box5{

width:62px;

height:199px;

position:absolute;

margin-top:38px;

-moz-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 50deg);

-webkit-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 50deg);

-o-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 50deg);

-ms-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 50deg);

transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 50deg);

}

.box3, .box4{

width:199px;

height:199px;

position:absolute;

margin-top:0;

}

.box4{

margin:75px 0 0 63px;

border:0;

}

.box5{

margin-left:200px;

border:0;

}

.box6{

margin-top:200px;

border:0;

}

</style>

</head>

<body>

</body>

</html>

Selamat mencoba yah sobat, semoga dengan tutorial kali ini dapat menjadi inspirasi buat sobat untuk mengembangkan kemampuan yang terkadang banyak orang yang ga sadar dengan kemampuan yang di milikinya :-)

cara membuat website

.

Pertanyaanya, memang bisa Membuat Kubus Menggunakan CSS3?

Artikel Terkait:

No Responses