Membuat Kubus Isometric "3D" Menggunakan CSS | Buku Catatan si Ugi

Home › Blogs Tutorial › CSS › Widgets › Membuat Kubus Isometric "3D" Menggunakan CSS

Efek visual yang dapat dicapai dengan menggunakan -moz-transform, atau CSS transformation property yang tersedia pada browser Firefox 3.5, adalah Fitur ini memungkinkan untuk menghasilkan efek faux 3D-isometrik atau kadang disebut juga 2.5D. Selain itu beberapa konten HTML dapat dipetakan kedalam kubus isometrik tersebut, seperti Text, Gambar, Video dan lain sebagainya.

View the Demo:

.Buku Catatan si UgiBuku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi Buku Catatan si Ugi...
isocubeisocube isocubeisocube isocubeisocube isocubeisocube isocube isocubeisocube isocubeisocube isocubeisocube isocubeisocube isocubeisocube
isocubeisocube isocubeisocube isocubeisocube isocubeisocube isocube isocubeisocube isocubeisocube isocubeisocube isocubeisocube isocubeisocube
isocubeisocube isocubeisocube isocubeisocube isocubeisocube isocubeisocube isocube isocubeisocube isocubeisocube isocubeisocube isocubeisocube
isocubeisocube isocubeisocube isocubeisocube isocubeisocube isocubeisocube isocube isocubeisocube isocubeisocube isocubeisocube isocubeisocube
isocubeisocube isocubeisocube isocubeisocube isocubeisocube isocubeisocube isocube isocubeisocube isocubeisocube isocubeisocube isocubeisocube


-moz-transform property dapat mengambil daftar fungsi CSS transformasi, termasuk rotate (memutar), scale (skala), skew (kemiringan) dan translate (menerjemahkan). Beberapa transformasi bisa dilakukan bersamaan dengan menggunakan matriks transformasi affine 2D tunggal. Karena semua fungsi transformasi CSS bekerja dalam dua dimensi, sedangkan transformasi 3D belum dapat dicapai dengan proyeksi perspektif ini. Dalam hal ini, cukup menggunakan fungsi transformasi memutar dan miring untuk menciptakan isometrik efek.

Pertama yang harus ditentukan adalah mendefinisikan div wadah untuk kubus, dan kemudian div persegi untuk tampak atas, kiri, dan kanan kubus.

<div class="cube">
<div class="face top">
</div>
<div class="face left">
</div>
<div class="face right">
</div>
</div>

.cube {
position: absolute;
}
.face {
position: absolute;
width: 200px;
height: 200px;
}

Setelah itu anda harus memutar dan mengatur kemiringan kubus, dalam rangka untuk mengubah setiap persegi div menjadi genjang dimana sudut dengan simpul 60 ° atau 120 °. Berikut adalah penggunaan transformasi -moz-transform CSS property.

.top {
-moz-transform: rotate(-45deg) skew(15deg, 15deg);
}
.left {
-moz-transform: rotate(15deg) skew(15deg, 15deg);
}
.right {
-moz-transform: rotate(-15deg) skew(-15deg, -15deg);
}

Dengan menentukan posisi absolute, ini adalah untuk menghubungkan setiap div dalam krangka membentuk muka atau sisi kubus isometrik. Anda dapat menggunakan matematika matriks untuk melakukan ini, sampai berbaris dan terlihat dengan benar.

Untuk menambah efek 3D, dan kubus isometrik terlihat berbayang, anda harus menentukan warna yang berbeda pada setiap sisi. bayangan disini pada dasarnya hanya salinan dari muka atau tampak bagian atas kubus yang ditarik ke kiri bawah, kemudian memberikan bayangan div warna latar belakang hitam dan mengatur opacity: 0.5; untuk membuat penyaring pada latar belakang halaman.

Teks dan bentuk tombol, dapat diletakkan di dalam div untuk setiap sisi kubus. Ini akan diterjemahkan ke dalam perspektif yang benar. anda juga dapat memasang sebuah video ke salah satu sisi kubus tersebut dan itu merupakan suatu karya besar.

Dengan membuat salinan markup kubus dan menggunakan lebih dari dua fungsi transformasi CSS, anda bisa membuat sebuah kubus kedua dengan scale(0.5) transformasi, dan memindahkan posisinya dengan menggunakan translate(600px, 400px).
CSS transformasi ini juga mendukung Safari 3.1 + dan Chrome dengan menggunakan -webkit-transform properti CSS.

Saya berharap CSS transformasi ini merupakan hal yang menarik dan dapat membuka pikiran Anda untuk beberapa kemungkinan besar yang dapat menginspirasikan anda.

Berikut ini adalah kode CSS dan HTML lengkap yang dapat anda gunakan untuk  Membuat Kubus Isometric.

Kode CSS
<style type="text/css" media="screen">
body {
background: #090;
text-align: center;
font-family: sans-serif;
}

a {
color: #6f6;
}

a:hover {
text-decoration: none;
}

#backdrop {
width: 600px;
color: #0f0;
font-family: monospace;
font-size: 24px;
margin: 0 auto;
-webkit-transform: rotate(-45deg) skew(15deg, 15deg);
-moz-transform: rotate(-45deg) skew(15deg, 15deg);
-o-transform: rotate(-45deg) skew(15deg, 15deg);
-ms-transform: rotate(-45deg) skew(15deg, 15deg);
transform: rotate(-45deg) skew(15deg, 15deg);
}

.cube {
position: absolute;
top: 90px;
left: 360px;
}

.face {
position: absolute;
width: 200px;
height: 200px;
overflow: hidden;
font-family: monospace;
font-size: 24px;
}

.top {
top: 0;
left: 89px;
background: #fff;
color: #999;
-webkit-transform: rotate(-45deg) skew(15deg, 15deg);
-moz-transform: rotate(-45deg) skew(15deg, 15deg);
-o-transform: rotate(-45deg) skew(15deg, 15deg);
-ms-transform: rotate(-45deg) skew(15deg, 15deg);
transform: rotate(-45deg) skew(15deg, 15deg);
}

.left {
top: 155px;
left: 0;
background: #999;
color: #333;
-webkit-transform: rotate(15deg) skew(15deg, 15deg);
-moz-transform: rotate(15deg) skew(15deg, 15deg);
-o-transform: rotate(15deg) skew(15deg, 15deg);
-ms-transform: rotate(15deg) skew(15deg, 15deg);
transform: rotate(15deg) skew(15deg, 15deg);
}

.right {
top: 155px;
left: 178px;
background: #ccc;
color: #666;
-webkit-transform: rotate(-15deg) skew(-15deg, -15deg);
-moz-transform: rotate(-15deg) skew(-15deg, -15deg);
-o-transform: rotate(-15deg) skew(-15deg, -15deg);
-ms-transform: rotate(-15deg) skew(-15deg, -15deg);
transform: rotate(-15deg) skew(-15deg, -15deg);
}

.shadow {
top: 310px;
left: -89px;
background: black;
opacity: 0.5;
-webkit-transform: rotate(-45deg) skew(15deg, 15deg);
-moz-transform: rotate(-45deg) skew(15deg, 15deg);
-o-transform: rotate(-45deg) skew(15deg, 15deg);
-ms-transform: rotate(-45deg) skew(15deg, 15deg);
transform: rotate(-45deg) skew(15deg, 15deg);
}

video {
width: 100%;
height: 100%;
}

#two {
-webkit-transform: scale(0.5) translate(700px, 600px);
-moz-transform: scale(0.5) translate(700px, 600px);
-o-transform: scale(0.5) translate(700px, 600px);
-ms-transform: scale(0.5) translate(700px, 600px);
transform: scale(0.5) translate(700px, 600px);
}

</style>

Kode HTML
<div id="backdrop">

<a href="http://www.zachstronaut.com/">Zachstronaut</a>... isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube
</div>

<div class="cube">
<div class="face top">

isocubeisocube
isocubeisocube
isocubeisocube
iso<input type="button" name="button" value="HTML Button" />cube
isocubeisocube
isocubeisocube
isocubeisocube
isocubeisocube
</div>

<div class="face left">
<!--
isocubeisocube
isocubeisocube
isocubeisocube
iso<input type="button" name="button" value="HTML Button" />cube
isocubeisocube
isocubeisocube
isocubeisocube
isocubeisocube
-->
<video autoplay>
<source src="test.ogg" type="video/ogg">
<source src="test.mov">
Your browser does not support the <code>video</code> element.
</video>

</div>

<div class="face right">
isocubeisocube
isocubeisocube
isocubeisocube
iso<input type="button" name="button" value="HTML Button" />cube
isocubeisocube
isocubeisocube
isocubeisocube
isocubeisocube
</div>
<div class="face shadow"></div>
</div>

<div id="two" class="cube">
<div class="face top">
isocubeisocube
isocubeisocube
isocubeisocube
iso<input type="button" name="button" value="HTML Button" />cube
isocubeisocube
isocubeisocube
isocubeisocube
isocubeisocube
</div>

<div class="face left">
isocubeisocube
isocubeisocube
isocubeisocube
iso<input type="button" name="button" value="HTML Button" />cube
isocubeisocube
isocubeisocube
isocubeisocube
isocubeisocube
</div>
<div class="face right">
isocubeisocube
isocubeisocube
isocubeisocube
iso<input type="button" name="button" value="HTML Button" />cube
isocubeisocube
isocubeisocube
isocubeisocube
isocubeisocube
</div>
<div class="face shadow"></div>
</div>

sumber: zachstronaut

0 komentar:

Post a Comment



Catatan :

Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon







 

Anda sudah mengaktifkan penyaringan konten ( AdBlocker di Aktifkan )

Mohon maaf untuk sementara Anda tidak dapat melihat halaman ini, silahkan kembali lagi setelah Anda menonaktifkan filter yang Anda gunakan. Abaikan