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.
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>
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>
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 :-)
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.
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:
