CSS3 | Transform Rotate : Memutar Text / Gambar

Assalamualaikum...
Sambil makan es krim, Saya ingin berbagi artikel lagi nih dan kali ini mengenai CSS3 lagi. CSS3 kali ini membahas mengenai Transform Rotate, yang digunakan untuk memutar gambar maupun tulisan. Trik ini bisa membuat blog anda lebih menawan. Beuh, dan akhirnya menjadi blog profesional. Amiin (doakan blog saya juga ya).


Oke, cukup, mari kita bahas...
Untuk membuatnya saya bilang cukup mudah, eh agak susah ding tapi di blog ini, akan dibuat lebih mudah, ahahah.. Ikuti langkah di bawah ini
1. Login ke blog anda --> Design --> Edit HTML
2. Masukkan kode CSS berikut di bawah
.transrot {
-moz-transform:rotate(10deg);
-khtml-transform:(10deg);
-webkit-transform:(10deg);
-o-transform:(10deg);
transform:rotate(10deg);
-icab-transform:(10deg);}
Untuk memasangnya anda bisa melakukan seperti ini
Tulisan yang ingin diputar
ATAU langsung dengan memasang

<div style="transform:rotate(10deg);-khtml-transform:(10deg);-moz-transform:rotate(10deg);-webkit-transform:(10deg);-icab-transform:(10deg);-o-transform:(10deg);">Tulisan Yang Diputar</div>
*Note:
10deg disini adalah sudut dari tulisan atau gambar yang diputar.
Anda bisa menggunakannya dengan menambahkan - di depan sehingga menjadi -10deg.




Untuk Demonya, silahkan perhatikan di bawah ini



Tulisan Yang Diputar

Saya ingin berbagi artikel lagi nih dan kali ini mengenai CSS3 lagi.




 CSS3 kali ini membahas mengenai TransformRRotate, yang digunakan untuk mem
utar gambar maupun tulisan.

Untuk membuatnya saya bilang cukup mudah, eh agak susah ding tapi di blog ini, akan dibuat lebih mudah, ahahah.. Ikuti langkah di bawah ini





Ya cukuplah untuk demonya..

Nah, Bagaimana? Menarik bukan?
Silahkan dicoba dan beri komentar dan like beserta dimohon sharenya. Terima kasih..
Wassalamualaikum...

15 comments:

  1. keren ilmunya sob , tapi kasihan pengunjung blog , jadi harus muter2 laptopnya supaya bisa baca , hehehe

    ReplyDelete
  2. @Muhammad Chandra iya mas, ahaha.. ribet lagi kalo pake PC wakakka

    ReplyDelete
  3. slam knal sob, saling follow yu, sya sdah follow km, tlong follow balik ya,.,.!!! makasih sebelumnya,.,.,.!!!

    ReplyDelete
  4. wah..mantap nih..
    kapan kapan izin coba ya :))
    soalnya ga sempat sekarang...

    "Semoga sukses selalu kawan"

    ReplyDelete
  5. @enda fiVersMakasih mas.. iya sukses juga!
    @agung ardhi wijayantoiya mas.. makasih
    @SyahidaComputer
    makasih, sama sama mas :)

    ReplyDelete
  6. Thx kunjungannya ya bro, kunjungan balik nih... :)

    Mantep Info nya bro,, :) thx..

    ReplyDelete
  7. wah mantabs dan keren nih sob, nakasih atas tipsnya. Salam

    ReplyDelete
  8. oK sob infonya...

    sekalian numpang promo dikit

    www.alycomp.co.cc

    FREE DOWNLOAD SOFTWARE AND GAME FULL VERSION

    ReplyDelete
  9. keren nih tipsnya sob,, teksnya bisa mutar-mutar 360 derajat nih....

    ReplyDelete
  10. wah bagus nih info, mau dicoba dulu ah..
    hehe..

    ReplyDelete
  11. Gan mau nanya nih kalo agan design blognya sendiri apa pake software atau apa?

    ReplyDelete
  12. Menarik benar tutorialnya..

    Izin share mas.

    Salam kunjungan
    http://www.bloghendri.com

    ReplyDelete
  13. @wildancahyo saya desain sendiri berdasar kepada inspirasi dari teman teman blogger..
    @maiga, bri, computer word, asis, newbiez, hendri: iya mas, sama sama

    ReplyDelete
  14. ilmu yg sangat bermanfaat,langsung saya coba teman

    ReplyDelete