Dalam membuat desain sebuah website, seringkali kita ingin memberikan sedikit kesan unik agar pengunjung dapat mengingat website kita dan datang kembali. Kesan unik ini dapat dicapai dengan beberapa cara, misalnya “memecahkan” grid, menggunakan warna yang unik, ataupun bermain dengan elemen-elemen yang ada di dalam halaman web.

Misalnya terkadang kita ingin membuat gambar sedikit miring atau ingin membuat sebuah elemen div menjadi lebih besar. Sebelum HTML5 dan CSS3, efek-efek tersebut merupakan suatu hal yang sangat sulit dicapai. Untungnya CSS3 telah menambahkan fitur-fitur untuk mempermudah kita dalam memberikan efek-efek transformasi umum ke dalam elemen HTML. Mari kita lihat fitur-fitur CSS baru yang memudahkan hal tersebut!

Elemen Dasar

Sebelum mulai melihat fitur-fitur dari CSS yang membantu transformasi elemen, kita akan membuat elemen yang akan ditransformasi terlebih dahulu. Buatlah sebuah file HTML dengan isi sebagai berikut:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Transform</title>

    <style type="text/css">
        #object {
            background-color: #F44;
            padding: 15px;
            width: 300px;
        }

        body {
            font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            padding: 100px;
            font-size: 13px;
        }

        div {
            background: #fff;
            margin: 0 auto;
            width: 200px;
            padding: 100px;
            text-align: center;
            /* border-radius */
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            /* box-shadow */
            -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
            -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
            box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
        }
    </style>
</head>
<body>
    <div id="object">
        <h1>Sebuah objek yang akan di-transform.</h1>
    </div>
</body>
</html>

Sampai di sini kita akan mendapatkan elemen dasar HTML yang nantinya akan kita ubah. Jika tidak ingin membuat file baru di PC, anda dapat mencoba kode tersebut secara online di sini. Tampilan yang kita dapatkan sejauh ini adalah sebagai berikut:

Elemen Awal

Selanjutnya kita akan melihat elemen CSS yang dapat digunakan untuk transformasi objek tersebut. Perlu diingat bahwa perubahan akan dilakukan langsung pada elemen style pada HTML.

Properti CSS: Transform

Properti yang digunakan untuk melakukan transformasi terhadap objek HTML adalah properti transform. Cara penulisannya adalah sebagai berikut:

selector {
       -moz-transform: <fungsi-transform>;
         -o-transform: <fungsi-transform>;
    -webkit-transform: <fungsi-transform>;
            transform: <fungsi-transform>;
}

Pengunaan prefiks seperti -moz, -o, dan -webkit penting karena fungsi ini belum resmi menjadi standar. Prefiks digunakan untuk memastikan properti dapat digunakan pada setiap browser yang ada (browser biasanya mengimplementasikan properti non-standar dengan menggunakan prefiks).

Pertanyaan selanjutnya tentunya adalah nilai apa yang harus diisikan pada <fungsi-transform>? Terdapat sangat banyak fungsi transformasi yang dapat digunakan, masing-masing memberikan efek yang berbeda-beda. Misalnya, kita dapat memutar gambar dengan menggunakan fungsi rotate, sehingga jika CSS untuk #object kita tambahkan dengan:

#object {
    /* ... */

       -moz-transform: rotate(20deg);
         -o-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
}

Kita akan mendapatkan kotak yang telah dirotasi (berputar) searah jarum jam sebanyak 20 derajat (versi online):

Kotak Dirotasi 20 Derajat

Contoh fungsi transformasi yang lain misalnya skew, yang berguna untuk “memiringkan” sebuah elemen. Agar mudah dimengerti, langsung saja kita coba tambahkan kode berikut pada #object, menggantikan kode transform sebelumnya:

#object {
    /* ... */

       -moz-transform: skew(20deg, 10deg);
         -o-transform: skew(20deg, 10deg);
    -webkit-transform: skew(20deg, 10deg);
            transform: skew(20deg, 10deg);
}

Yang akan memberikan kita tampilan sebagai berikut (versi online):

Elemen yang Ditarik

Catatan: Parameter pertama fungsi skew akan “menarik” elemen terhadap sumbu X (garis horizontal), dan parameter kedua “menarik” elemen terhadap sumbu y (garis vertikal).

Masih terdapat sangat banyak fungsi-fungsi trannsformasi lainnya yang dapat dicoba, dan untuk mempersingkat tulisan kita tidak akan membahas semuanya di sini. Jika tertarik untuk melihat dan mencoba seluruh fungsi yang ada, silahkan lihat daftar fungsinya di sini.

Akhir kata, selamat bereksperimen dengan fungsi transformasi CSS!

comments powered by Disqus

Daftar Isi