Rotate dengan CSS3

Kemampuan baru pada CSS3 adalah rotate. Bisa digunakan untuk rotate tulisan maupun gambar. Biasanya untuk melakukan rotasi harus menggunakan script. Kini hal itu dipermudah dengan CSS3.

CSS3 saat ini baru diimplementasikan pada web browser major terbaru. Seperti Mozilla Firefox 3.5, Safari 4.0 dan Google Chrome 3.0beta.

Seorang rekan di CHIP Forum bertanya tentang pembuatan tombol miring dengan wujud foto. Berikut mockup dari aplikasi web yang ingin dibuatnya:

Original file here.

Untuk membuat tombol tersebut dengan CSS3 bisa menggunakan –moz-transform atau –webkit-transform atau –moz-transform-origin atau –webkit-transform-origin.

Pada contoh disini, saya menggunakan –moz-transform dan –webkit-transform.

img {
position: absolute;
border: 0;
-moz-box-shadow: black 0 0 7px 1px;
-webkit-box-shadow: black 0 0 7px 1px;
}
#home {
top: 50px;
left: 100px;
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
z-index: 10;
}
#portfolio {
top: 150px;
left: 80px;
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
z-index: 9;
}
#product {
top: 270px;
left: 100px;
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
filter: matrix(10 10 10 10);
z-index: 8;
}
#about {
top: 410px;
left: 90px;
-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
z-index: 9;
}
#contact {
top: 520px;
left: 90px;
-moz-transform: rotate(-16deg);
-webkit-transform: rotate(-16deg);
z-index: 8;
}

Dengan HTML:

<img id="home" src="home.gif" />
<img id="portfolio" src="home.gif" />
<img id="product" src="home.gif" />
<img id="about" src="home.gif" />
<img id="contact" src="home.gif" />


Untuk menjaga agar ukuran file tetap kecil, saya hanya menggunakan satu gambar, yaitu home.gif.

(Download Demo)

Note: Untuk dapat melihat hasil demo ini, anda harus menggunakan web browser yang disebutkan diatas.

Cara Menyembunyikan Tag Div

Misalnya anda mempunyai file HTML dengan isi:

<h2>Operating System</h2>
<div>
  <ul>
    <li>Microsoft Windows</li>
    <li>Mac OS X</li>
    <li>Ubuntu Linux</li>
    <li>FreeBSD</li>
  </ul>
</div>

Kira2 bentuk tag html diatas seperti dibawah ini:

Operating System

• Microsoft Windows
• Mac OS X
• Ubuntu Linux
• FreeBSD

Anda ingin bila tulisan Operating Sytem ditekan, akan menyembunyikan daftar
Operating System dibawahnya.

Caranya:

1. Tambahkan attribute onclick di tag <h2>
   yang memanggil function Javascript hide(). Jangan lupa tambahkan attribute id pada div.
   Kira-kira isinya menjadi seperti ini:

   <h2 onclick="hide('my-list')">Operating System</h2>
   <div id="my-list">
     <ul>
       <li>Microsoft Windows</li>
       <li>Mac OS X</li>
       <li>Ubuntu Linux</li>
       <li>FreeBSD</li>
     </ul>
   </div>
   

2. Buat Javascript-nya.

   <script type="text/javascript">
     function hide(id) {
       document.getElementById(id).style.display = 'none';
     }
   </script>

   Sekarang kalau anda click tulisan Operating System, daftar dibawahnya akan hilang. Eiittss, ada tapi nya. Kalau di-click lagi
   nggak muncul. Ubah code Javascript diatas menjadi seperti ini:

   <script type="text/javascript">
   function hide(id)
   {
     if (is_hide == true) {
       document.getElementById(id).style.display = 'block';
       is_hide = false;
     }
     else {
       document.getElementById(id).style.display = 'none';
       is_hide = true;
     }
   }
   </script>

Contoh disini menggunakan attribute onclick. Anda bisa saja
membuatnya menggunakan link atau membuat tombol baru dengan <button>.
Dan tentu saja bukan cuma <div> yang bisa disembunyikan. Tag-tag lain juga bisa kok.

Semoga tulisan ini membantu para web developer’s newbie atau yang lupa cara
menyembunyikan suatu content dengan Javascript dan CSS.