CSS3 2D transform translate `

bagaimanakah cara memindahkan suatu box / gambar dari kiri ke kanan dan dari atas ke bawah .. sebetulnya apa sih CSS3 2D transform translate itu ..?

sebetulnya mastony sudah menjelaskan pada posting artikel mengenai CSS3 2D transform skew apa itu transform ..? , sedangkan untuk fungsi dari property transform translate ini yaitu memindahkan suatu box element div / gambar dari kanan ke kiri atau sebaliknya dan dari atas ke bawah atau sebaliknya yang mungkin memerlukan aturan CSS3 2D transform translate ini , transform translate ini bisa diterapkan di widget ataupun pada postingan blog .
sedangkan untuk dukungan bahasa browser property transform translate ini dapat di baca pada browser :
mozilla --> menggunakan -moz-
opera --> menggunakan -o-
safari --> menggunakan -webkit-
chrome --> menggunakan -webkit-
Internet Explore --> menggunakan -ms-

div {property:function value;}
div {transform:translate(px);}

baiklah kita akan menguji coba pada file gambar berikut yang kita taruh pada sebuah box dengan lebar 140px dan tinggi 120px :

dan hasil di atas sebagai berikut ini kode css nya .

<style>.bgTranslate{width:140px;height:120px;margin:0;padding:10px;border:1px solid gray;transform:translate(40px,20px);-moz-transform:translate(40px,20px);-webkit-transform:translate(40px,20px);-o-transform:translate(40px,20px);-ms-transform:translate(40px,20px);}</style>
<div class="bgTranslate">
<img src="https://06080c19-a-62cb3a1a-s-sites.googlegroups.com/site/mas4nton/blognya-mastony/gambar%20daun.png" /></div>

value 40px untuk horizontal / X-axis ( dari kiri ke kanan )dan 20px untuk vertical Y-axis ( dari atas ke bawah ) .
sepintas ndak ada efek tpi css ini mungkin bisa membantu untuk peletakan box / element untuk blog anda . mastony akan memberikan contoh lagi agar lebih di mengerti kita akan buat box tersebut mengeluarkan efek transform ketika di kunjungi pointer mouse / hover .

dan hasil daripada di atas sebagai berikut ini :

<style>.bgTranslate2{width:140px;height:120px;margin:0;padding:10px;border:1px solid gray;}.bgTranslate2:hover{transform:translate(40px,20px);-moz-transform:translate(40px,20px);-webkit-transform:translate(40px,20px);-o-transform:translate(40px,20px);-ms-transform:translate(40px,20px);}</style><div class="bgTranslate2"><img src="https://06080c19-a-62cb3a1a-s-sites.googlegroups.com/site/mas4nton/blognya-mastony/gambar%20daun.png"/></div>

sebetulnya efek ini hampir sama dengan css margin hanya saja property translate ini bisa bisa menutupi element lainnya apabila kita ingin menumpuknya ,, saya rasa cukup sekian perbincangan kita mengenai CSS3 2D transform translate di blog ini selamat mencoba ,,

Terima kasih Anda telah membaca Artikel mengenai CSS3 2D transform translate dan Kata kunci untuk Artikel ini yaitu CSS3 2D transform translate