Rabu, 18 Agustus 2010

CSS3 : Transform rotate (mengatur rotation tulisan dan gambar)

| Rabu, 18 Agustus 2010 | 11 komentar
Selamat membaca artikel diblog ini semoga bermanfaat :)

Bismillah, Lagi lagi saya membahas tentang CSS3, yang kita bahas adalah Transform rotate yang digunakan untuk mengatur rotation tulisan dan gambar. Efek ini bisa membuat tulisan atau gambar terbalik dan miring. Didalam efek ini kita menggunakan satuan deg atau degree yang artinya derajat.

Screenshot :
K-blogger

Kode Css yang saya gunakan:
-moz-transform:rotate(180deg);
-webkit-transform:(180deg);
-o-transform:(180deg);
-icab-transform:(180deg);
-khtml-transform:(180deg);


Sebagai contoh saya akan membuat Transform rotate pada post:
1. Cari code berikut:
.post {
font: 13px trebuchet ms;
margin-bottom:15px;
text-align:justify;
color: #000000;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
}


2. Lalu tambahkan code berikut dibawahnya

.post rotate {
-moz-transform:rotate(180deg);
-webkit-transform:(180deg);
-o-transform:(180deg);
-icab-transform:(180deg);
-khtml-transform:(180deg);
}


3. Lalu save

Cara menggunakannya : <rotate>K-blogger</rotate>
Catatan: code yang berwarna merah adalah derajat rotatenya :)

Selamat mencoba!!!

11 komentar :

Akbar mengatakan...

hohohoho kayak ini tulisan terbalik ya

AZ COMSOFT mengatakan...

kalau saya pakai jQuery sob, tapi tutorial ini sangat bermanfaat sob... ^_^

Belajar Asik mengatakan...

Css3 mmg keren abiz...!!!!

Beben Koben mengatakan...

vitaerc peek...yoc patnam

Unknown mengatakan...

inimah di pake bro ardiannz :)

Alif Winda Hardika mengatakan...

keren abizz...

Anonim mengatakan...

makasih infi nya sob...hehee..baru tau saya

BeDa mengatakan...

Baru tahu tutorialnya di sini. Sempat bertanya ketika melihat tulisan terbalik seperti itu: bagaimana caranya? kini terjawab sudah

Salam ukhuwah

aufal mengatakan...

ternyata tulisan terbalik itu ada maksut ya.... q kirain salah tulis...hehehehe

Iklan Baris Gratis Tanpa Daftar mengatakan...

wahh dikirain dikirain salah edit ternyata memang di sengaja di bikin terbalik tulisannya ya

Rumah Imajinasi mengatakan...

wah keren abiz sob..tak coba ah..

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Posting Komentar

 

Blogroll

Flagcounter

free counters
© Copyright 2010. K-blogger . All rights reserved | K-blogger is proudly powered by Blogger.com | Template by o-om.com - zoomtemplate.com
Pasang Iklan Gratis Sebagai Awal Mulai Bisnis Online