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 ..