Cara Merotasi Text Dan Gambar Dengan CSS.

<div style='background-color: none transparent;'></div>
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.

5 komentar:

Habil DS mengatakan...

thanks.. nice info..!!
salam NSXcrew!!

Buku Tamu Slide Effect Jquery mengatakan...

Infonya keren nuh,, pasti saya coba dirumah..

Beben Koben mengatakan...

hmmm...
keep posted my bro \m/

kasful mengatakan...

thanks gan atas infonya....

download itazura na kiss sub indo mengatakan...

makasih dah share

Posting Komentar

Kirimkan komentar yang berbobot untuk membangun kredibilitas anda, Komentar dengan link sampah/spam akan saya hapus.