Dalam tutorial ini saya ingin membuat sebuah tumpukan gambar dengan menggunakan css dalam penggunaan property Transform Rotate. Sebelum kita jelaskan dulu konsep dari property Transform.

Sesuai dengan artinya, rotate akan memutar elemen sesuai dengan derajat yang diberikan. Nilai untuk fungsi ini memiliki satuan deg, nilai positif akan memutar elemen searah jarum jam, dan nilai negatif akan memutarnya berlawanan arah jarum jam.

9-transform-rotate-1

Untuk menggunakan property ini, kita masih harus menggunakan prefix karena pada beberapa browser property transform masih belum stabil atau bahkan tidak ada seperti gambar dibawah ini.

9-transform-rotate-2

Pertama tama teman teman buatlah struktur HTML nya sebagai berikut

9-transform-rotate-3

Ini bagian dari file CSS

9-transform-rotate-4

Setelah semuanya dibuat kalian bisa save dan lihat hasilnya.

Dengan adanya property transform, anda dapat memanipulasi elemen HTML dengan lebih leluasa, bahkan anda dapat menambahkan efek-efek transformasi yang keren tergantung dari kreatifitas anda.

Semoga Bermanfaat