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.

Mengenal CSS3 Selector

Saat ini CSS3 hanya dapat digunakan pada web browser terbaru. Seperti Safari 4.0, Opera 10 dan Firefox 3.5, Google Chrome 3.0. Sayangnya Internet Explorer 8 belum mengimplementasikan CSS3 ini.

Untuk contoh CSS dibawah, kita menggunakan HTML:

<ul>
<li>Ganjil - 1</li>
<li>Genap - 2</li>
<li>Ganjil - 3</li>
<li>Genap - 4</li>
<li>Ganjil - 5</li>
</ul>

Elemen Ganjil dan Genap

li:nth-child(odd) { color: blue; }
li:nth-child(even) { color: green; }

Code diatas digunakan untuk memilih tag li yang ganjil dan genap.

Setiap Elemen Ketiga

li:nth-child(3n) { color: orange; }

Code diatas digunakan untuk membuat warna pada baris ketiga dan kelipatannya.

Elemen Tertentu

li:nth-of-type(3) { color: orange; }
li:nth-child(5) { color: red; }

Selector hanya memilih baris ketiga dan kelima.

Elemen Pertama dan Terakhir

Elemen Pertama

li:first-of-type { color: blue; margin-left: 15px; }

Elemen Terakhir

li:last-of-type { color: green; margin-left: 15px; }

Dua Elemen Pertama

li:nth-child(-n+2) { color: green; margin-left: 15px; }

Dua Terakhir

li:nth-last-child(-n+2) { color: green; margin-left: 15px; }

CSS3 membuat tugas anda menjadi lebih mudah. Sayangnya belum semua web browser mengimplementasikannya saat ini. Harapannya semoga semua pengguna web browser meng-update web browser mereka. Agar apa yang ingin ditampilkan oleh web developer sesuai dengan yang dilihat end-user.

References: http://inspectelement.com/tutorials/a-look-at-some-of-the-new-selectors-introduced-in-css3/

Blogged with the Flock Browser