CSS3 3D memutar gambar ( transform rotate ) `

bagaimanakah cara memutar box div element atau file gambar menjadi terbalik , , apa itu CSS3 3D transform rotate itu . . lalu apa Efek dari property ini . . ?

kali ini mastony tidak akan panjang lebar mengenai CSS3 3D transform rotate ini , karena sebelumnya kita telah membahas CSS3 2D transform property diantaranya yaitu

Translate | Skew | Rotate | Scale

kelebihan dari CSS3 3D transform rotate ini anda bisa memutar / menghadapkan box ataupun gambar Dari mulanya menghadap ke kiri menjadi berubah ke kanan dan dari yang menghadap ke bawah bisa berubah menghadap ke atas atau kita sebut saja efek memutar tapi berbalik .
sedangkan untuk dukungan bahasa browser property CSS3 3D TRANSFORM ROTATE dapat di baca oleh browser :
Mozilla --> menggunakan -moz-
Safari --> menggunakan -webkit-
Chrome --> menggunakan -webkit-
CATATAN : Opera Dan Internet Explore tidak di dukung .

div {transform:rotateX(deg) | transform:rotateY(deg) |
transform:rotateZ(deg) | transform:rotate3d(deg)

baiklah kita akan menguji coba pada file gambar berikut ini :

tranform rotateY ( di Area vertical ) dengan value 150 degrees

dan hasil dari pada di atas sebagagai berikut ini CSS beserta HTML nya .

<style>.ImgMemutar{transform:rotateY(150deg);-moz-transform:rotateY(150deg);-webkit-transform:rotateY(150deg);}</style>
<div class="ImgMemutar"><img src="https://sites.google.com/site/blognyamastony/iconblog/rss2_buttons.png"/></div>

tranform rotateX ( di Area horizontal ) dengan value 150 degrees

oke , , sekarang kita akan buat file gambar berbalik dari bawah ke atas .

dan hasil dari pada di atas seperti berikut ini CSS beserta HTML nya :

<style>.ImgMemutarX{transform:rotateX(150deg);-moz-transform:rotateX(150deg);-webkit-transform:rotateX(150deg);}</style>
<div class="ImgMemutarX">
<img alt="gambar berbalik" src="https://sites.google.com/site/blognyamastony/iconblog/rss2_buttons.png" /></div>

akan saya beri contoh lagi untuk yang menggunakan tulisan / text saja seperti berikut ini

tulisan di dalam efek transformasi memutar 3D . .tulisan di dalam efek transformasi memutar 3D . .tulisan di dalam efek transformasi memutar 3D . .tulisan di dalam efek transformasi memutar 3D . .

dan saya rasa cukup sekian tentang CSS3 3d transform rotate ini semoga bermanfaat bagi anda .. jika ada yang perlu di tanyakan silahkan tanya di kotak komentar ..

Terima kasih Anda telah membaca Artikel mengenai CSS3 3D memutar gambar ( transform rotate ) dan Kata kunci untuk Artikel ini yaitu CSS3 3D memutar gambar ( transform rotate )