Membuat Gambar Krangka Kubus dengan Html dan Css

Membuat Gambar kubus dengan html dan css, pada perkembangannya membuat gambar tidak hanya bisa lakukan dengan menggunakan tangan dan alat tulis saja, 
membuat gambar kubus dengan html

seperti contoh saat kita ingin menggambar Krangka Kubus kita bisa membuat nya dengan menggunakan code Html dan Css. bahkan sekarang gambar yang dihasil kan tidak hanya gambar 2D (2 Dimensi) tapi sudah bisa sampai 3D (3 Dimensi) sehingga memungkinkan agar objeck gambar yang kita buat menjadi terlihat lebih nyata.
Kubus adalah bangun ruang tiga dimensi yang memiliki batasan enam bidang sisi yang berbentuk bujur sangkar. Kubus memiliki 6 sisi, 12 rusuk, dan 8 titik sudut. Kubus bisa disebut bidang enam beraturan, dengan kata lain kubus merupakan bentuk khusus dalam prisma segi empat.

membuat gambar dengan komputer bisa kita lakukan secara mudah dengan menyiapakan teks editor html seperti notepad atau notepad ++ dan browser misal mozilla atau google chrome.
untuk membuat gambar krangka kubus bisa teman-teman copy script html dan css di bawah ini :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> MUDAH MEMBUAT KERANGKA KUBUS</title> <style type="text/css"> body{
padding:30px 0 0 50px;
} .box1, .box2, .box3, .box4, .box5, .box6{
opacity:.8;
background:#128;
} .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>
Code html dan css diatas dapat teman-teman ubah sesuai kebutuhan misal dari warna background, padding, margin, border ukuran sisi dll. agar menghasilkan gambar kubus dengan kerangka yang sesuai.
hasil code html untuk membuat kubus
Code html diatas akan menampilan gambar kubus warna navy blue karena backgroud nya saya beri warna 128(Navy Blue)

sekian dulu artikel Membuat Gambar Krangka Kubus dengan Html dan Css

No comments:

Post a Comment

Iklan Atas Artikel

Meta Propeller atas artikel

cara mudah turial kode Java blog website grafika komputer jaringan komputer dan Arduino

Iklan Tengah Artikel 2

Iklan Bawah Artikel