CSS 3 : Mengubah Tampilan Kotak 2D

Published · Updated

Tutorial ini adalah kelanjutan dari tutorial sebelumnya, site yaitu tentang CSS3 yang merupakan standard terbaru dari CSS. CSS3 menyediakan banyak fitur baru yang mendukung performa layout sebuah website. Beberapa fitur baru CSS sudah pernah saya bahas pada tulisan sebelumnya, diantaranya adalah @font, @media.

Fitur lain yang bisa dipelajari adalah transform. Transform digunakan untuk memutar sebuah objek sebesar sudut yang diinginkan dengan satuan “deg”.

Berikut syntaxnya dasarnya :

div { transform:rotate(besarnya-sudut); }

Misalnya saya punya sebuah kotak yang ingin saya putar 45 derajat, maka penulisannya CSS3 nya adalah :

[sourcecode language=”css”]
<style>
/*membuat kotak */
div {
width:150px; /*lebar kotak */
height:50px; /* tinggi kotak */
background-color:#BDB76B; /* warna kotak */
border:2px solid #556B2F; /*border kotak */
border-radius:5px; /* lengkung kotak */
color:yellow; /*warna teks */
}

/*memutar kotak */
div#putar {
transform:rotate(45deg); /*syntac dasar */
-ms-transform:rotate(45deg); /* tambahan -ms- supaya bisa dijalankan di browser IE 9 */
-webkit-transform:rotate(45deg); /* tambahan -webkit- supaya bisa dijalankan di Safari and Chrome */
-moz-transform:rotate(45deg); /* tambahan -moz- supaya bisa dijalankan di Safari and Chrome */
}
</style>
[/sourcecode]

Untuk memanggilnya di HTML :

[sourcecode language=”css”]
<body>
<div> Kotak sebelum diputar </div>;
<div id="putar">Kotak setelah diputar 45 derajat</div>;
</body>
[/sourcecode]

Hasil dari syntax di atas bisa dilihat di sini.

Syntax di atas akan memutar kotak 45 derajat (arah ke kanan), sedangkan jika diinginkan memutar arah ke kiri, bisa dengan menambahkan tanda minus (-), misalnya (-45deg).

Selain Rotate, transform juga memiliki beberapa method lain, yaitu :

  • translate(), untuk memindahkan objek ke posisi baru. Penulisannya ” transform: translate(x,y); “

Lihat contoh di sini

  • scale(), untuk mengubah ukuran objek. Penulisannya “transform: scale(x,y); “

Lihat contoh di sini

  • skew(), untuk mengubah tampilan kontak menjadi condong (miring) berdasarkan derajat kemiringan. Penulisannya “transform: skew(x-angle,y-angle); “

Lihat contoh di sini

  • matrix(), untuk merupakan kombinasi dari seluruh method yang ada dengan menggunakan 6 parameter yang ada. Penulisannya, “transform:matrix(n,n,n,n,n,n);”

Lihat contoh di sini

Penggunaan syntax dasar “Transform” belum banyak didukung oleh browser, agar supaya bisa dijalankan menggunakan browser tertentu, maka ditambahkan syntax :

  • -moz- untuk browser mozilla firefox, menjadi -moz-transform
  • -webkit- untuk Safari and Chrome, menjadi-webkit-transform
  • -ms- untuk browser Internet explorer, menjadi-ms-transform

Selamat mencoba 🙂

You may also like...