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.

Iklan

4 pemikiran pada “Rotate dengan CSS3

  1. meskipun saya nggak begitu yang beginian, tapi ini informasih yang sangat berguna.. thx buat postingannya broo..

  2. nice infoo…..
    baru tau ternyata ada yang beginian,, coz dah lama gak ngoding hehehe… 😀

Tinggalkan Balasan

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s