Membuat Tulisan Terbalik Dengan Hover Efect With CSS3

Daftar Isi

Setelah sebelumnya saya mengajak anda membuat tulisan terbalik Versi biasa dengan CSS3, kali ini kita akan menambahkan Hover Efect...

Penampakannya seperti tulisan dibawah ini, untuk melihat perubahannya silahkan arahkan kursor anda ke tulisan dibawah ini:

Tuliskan yang akan ditampilkan terbalik...

Tertarik? silahkan ikuti panduan dibawah ini:

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:

]]></b:skin>

5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini tepat diatas kode tersebut atau sebelum kode ]]></b:skin> tersebut:

.terbalik_hover{
text-align:justify;
padding:10px 0px;
}
.terbalik_hover span{
display:block;
font-weight:bold;
transform:rotate(180deg);
-o-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-khtml-transform:rotate(180deg);
tansition:transform ease-in 1s;
-o-tansition:transform ease-in 1s;
-moz-transition:-moz-transform ease-in 1s;
-webkit-transition:-webkit-transform ease-in 1s;
-khtml-transition:-khtml-transform ease-in 1s;
}
.terbalik_hover:hover span{
transform:rotate(0deg);
-o-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-khtml-transform:rotate(180deg);
-khtml-transform:rotate(0deg);
} 

Jika sudah Save template anda, dan untuk memanggilnya silahkan gunakan perintah dibawah ini:

<div class="terbalik_hover">
<span>Tuliskan yang akan ditampilkan terbalik..</span>
</div>

Kemudian Publish Postingan anda dan lihat hasilnya...