Cara Merotasi Text Dan Gambar Dengan CSS.

Halo sobat,

Pada hari ini saya akan sharing tentang "Merotasi Text Dan Gambar Dengan CSS", mungkin ketika datang ke blog saya anda akan bertanya-tanya, itu gambar dibuat miring atau dimiringi dengan javascript. Sebenarnya gambar tersebut murni dari editan CSS.

Bagaimana sih caranya? Ikutin saya ya:
Saya buat sebuah kode css dengan id tags rotasi seperti dibawah ini:

#rotasi{
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
}

Setelah itu saya coba panggil css tersebut:

<div id="rotasi">Percobaan Rotasi 35 Derajat</div>

Nah kalau anda sudah pernah lihat cara membuat autoreadmore dengan thumbnail, anda bisa memodifikasi tampilan gambar tersebut dengan merubah cssnya seperti dibawah ini:

.thumb img {
  float: left;
  margin: 0 10px 10px 0;
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
}

Catatan: Tutorial ini akan terlihat hasilnya jika di lihat dari firefox. Untuk IE silahkan tambahkan kode.

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Angka 0 untuk 0 derajat, 1 untuk 90 derajat, 2 untuk 180 derajat, 3 untuk 270 derajat.

Sekarang lihat hasilnya di blog anda, semoga bermanfaat.