CSS3 transform rotate gambar `

bagaimanakah cara membuat file gambar / element div anda miring .. apa itu css transform rotate ..?

anda akan jadi sangat mudah membuat gambar menjadi miring /doyong menggunakan CSS3 2D transform rotate. transform adalah sebuah property dari css3 sedangkan rotate sebagai function , function pada property transform di antara lain yaitu transform:rotate , transform:scale , transform:translate , transform:skew , transform:matrix .
tapi tips kita akan bahas tentang transform rotate pada box / file gambar anda .
untuk value menggunakan degrees (deg) tentukan nilai value nya.
dan property transform ini dapat di dukung oleh semua browser .
untuk

• opera menggunakan -o-
• mozilla menggunakan -moz-
• safari dan chrome menggunakan -webkit-
• Internet Explore menggunakan -ms-
  

Tip :

property:function value;
transform:rotate( deg );

rotate pada gambar / box ke kanan

kita akan menguji coba pada sebuah file gambar sebagai berikut :
Gambar original :

Gambar miring 30 degrees ke kanan:
dan hasil gambar miring di atas sebagai berikut kode nya :

<style>img.rotategb{transform:rotate(30deg);-moz-transform:rotate(30deg);-webkit-transform:rotate(30deg);-o-transform:rotate(30deg);-ms-transform:rotate(30deg);}</style><img class="rotategb" src="https://sites.google.com/site/mas4nton/blognya-mastony/blog_accept.png"/>

anda juga dapat membuat gambarnya miring ke kiri dengan mengubah nilai degrees yaitu tanda kurang ( - ) sebelum angkanya .sedangakan untuk mengatur kemiringan pada gambar / box silahkan ubah nilai ( deg ) semakin besar akan semakin miring .

rotate pada gambar / box ke kiri

seperti berikut ini untuk contoh gambar miring ke kiri
Gambar miring 30 degrees ke kiri :
lalu bagaimana untuk yang memakai box

---

anda juga dapat menerapkan css tranform ini pada box / element div blog anda

hello world

dan hasil dari pada box di atas sebagai berikut ini :

<style>.rotateBox{border:2px dotted darkGrey;width:80px;height:80px;background:darkGreen;margin:20px;padding:30px;ransform:rotate(30deg);-moz-transform:rotate(30deg);-webkit-transform:rotate(30deg);-o-transform:rotate(30deg);-ms-transform:rotate(30deg);}</style>
<div class="rotateBox">hello world</div>

nah gimana tutornya mantabs ndak ? ,oy mungkin anda yang namanya mengubah warna background sidebar atau judul sidebar bisa baca ndek sini background sidebar dan footer dan mungkin anda membutuhkan css background resize baca disini background gambar ( resize ) okee ...silahkan di coba di tunggu lho likenya ..

Terima kasih Anda telah membaca Artikel mengenai CSS3 transform rotate gambar dan Kata kunci untuk Artikel ini yaitu CSS3 transform rotate gambar