Membuat Kubus Menggunakan CSS3

Membuat Kubus Menggunakan CSS3

Diposting oleh: Ilmu Website kategori: CSS

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

Artikel Terkait :

12 July
0
0