CSS3 Transisi dan Transformasi

UPDATE-Langsung aja ya bro...nih beberapa kode transisi dan transformasi CSS3. Mungkin aja anda tertarik untuk menggunakannya sewaktu-waktu untuk tampil gaya atau sedikit nyentil dan menggigit di posting anda. Ini script sebenarnya bisa anda terapkan untuk beberapa tampilan, baik itu menjadi text area, blockquote, dan untuk gambar. Ok .... lanjut nyimaknya____sampai habis ya....

Penggunaan
Cara Pertama

• Login ke blog sobat
• Klik Rancangan lalu pilih Tambah Gadget
• Masukkan Kode di bawah ini 
• Simpan

Cara Kedua 

• Login ke blog sobat
• Klik Rancangan 
• Edit HTML
• Masukkan kode berikut tepat di atas kode </head>
• Simpan Template

Catatan

Cara Pertama ane rasa lebih mudah dan singkat. Keuntungan lainnya anda tidak perlu mengedit HTML karena anda masukkan menjadi gadget. Bila ingin menghapusnya akan mudah nantinya. Tapi terserah anda ingin memilih cara yang mana.
Anda bisa memasukkan kode berikut semuanya atau salahtunya saja...untuk keterangan penggunaan silahkan anda baca pada bagian bawah posting ini.....baca aja sampai habis gan biar ente mengerti....siiibbbb???? 

Ini kode yang harus anda masukkan di atas kode </head>

<style type="text/css">

.testtransform, .testtransform-2{width:230px; border:5px solid green; -webkit-transition:all 1s ease-in-out; -moz-transition:all 1s ease-in-out; -o-transition:all 1s ease-in-out; font:18px Times; font-weight:bold; color:#F00; margin:20px; text-align:center; padding:10px; border-radius:12px; -moz-border-radius:12px; -webkit-border-radius:12px; background:#A9D0F5}

.testtransform-2{width:180px; height:300px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdnx5-MH29adxJv2xpHhcBvNEQbHP1fYnqf270IXMbehnLja99KB7oTWw5dvoocisP7CsBVYj7EF_PyzalqKEu6AtRxO1JHsWLvCRYY87ir-z83bni5f0Ziwonpcx1WZlj0WB1jaKPv7Im/s1600/gadis+muda+seksi+hot+01.jpg) center no-repeat; opacity:0.35; -moz-transition:all 1s ease; -webkit-transition:all 1s ease; -o-transition:all 1s ease; transition:all 1s ease}

.geseratas:hover{-webkit-transform:translate(0,-20px); -moz-transform:translate(0,-20px); -o-transform:translate(0,-20px)}

.geserbawah:hover{-webkit-transform:translate(0,20px); -moz-transform:translate(0,20px); -o-transform:translate(0,20px)}

.geserkanan:hover{-webkit-transform:translate(50px,0px); -moz-transform:translate(50px,0px); -o-transform:translate(50px,0px)}

.geserkiri:hover{-webkit-transform:translate(-50px,0px); -moz-transform:translate(-50px,0px); -o-transform:translate(-50px,0px)}

.gesernantas:hover{-webkit-transform:translate(50px,-20px); -moz-transform:translate(50px,-20px); -o-transform:translate(50px,-20px)}

.geserkibaw:hover{-webkit-transform:translate(-50px,20px); -moz-transform:translate(-50px,20px); -o-transform:translate(-50px,20px)}

.bg:hover{background:#8181F7}

.border:hover{border:5px solid red}

.bgborder:hover{background:#BEF781; border:5px solid red}

.opa:hover{opacity:0.2}

.rotasi:hover{-webkit-transform:rotate(330deg); -moz-transform:rotate(330deg); -o-transform:rotate(330deg)}

.ukuran:hover{-webkit-transform:scale(1.3); -moz-transform:scale(1.3); -o-transform:scale(1.3)}

.gabungan:hover{color:#AEB404; background:#AC58FA; border:5px solid #FA5858; opacity:0.9; -webkit-transform:scale(1.3) rotate(380deg) translate(30px,-20px); -moz-transform:scale(1.3) rotate(380deg) translate(30px,-20px); -o-transform:scale(1.3) rotate(380deg) translate(30px,-20px)}

.testtransform-2:hover{opacity:1; -moz-transform:scale(1.4) rotate(675deg) translate(25px); -webkit-transform:scale(1.4) rotate(6755deg) translate(25px); -o-transform:scale(1.4) rotate(675deg) translate(25px); transform:scale(1.4) rotate(675deg) translate(25px)}

</style>

Kode yang di gunakan pada saat anda memposting...petunjuknya silahkan baca pada keterangan di bawah posting ini....lanjut bacanya yaaaa.....makasih

Silahkan masukkan kode di bawah ini pada postingan anda atau pada widget anda dan lihat hasilnya. Anda dapat memilih salah satu kode, atau beberapa yang anda inginkan

<div class="testtransform geseratas">TRANSISI ATAS</div>
<div class="testtransform geserbawah">TRANSISI BAWAH</div>
<div class="testtransform geserkanan">TRANSISI KANAN</div>
<div class="testtransform geserkiri">TRANSISI KIRI</div>
<div class="testtransform gesernantas">TRANSISI KANAN ATASt</div>
<div class="testtransform geserkibaw">TRANSISI KIRI BAWAH</div>
<div class="testtransform bg">TRASFORMASI BACKGROUND</div>
<div class="testtransform border">TRASFORMASI BORDER</div>
<div class="testtransform bgborder">TRASFORMASI BACKGROUND DAN BORDER</div>
<div class="testtransform opa">TRASFORMASI OPACITY</div>
<div class="testtransform ukuran">TRASFORMASI UKURAN</div>
<div class="testtransform gabungan">TRASFORMASI GABUNGAN</div>
<div class="testtransform-2" style="float:none;margin:20px auto;">TRASFORMASI-2</div>

KETERANGAN

.testtransform, .testtransform-2 {  /*  kode rancangan dasar tampilan keseluruhan  */
width: 230px;  /*  besar kotak  */
border: 5px solid green;  /*  warna border sialhkan ganti dengan warna anda  */
-webkit-transition: all 1s ease-in-out;  /*  warna merah transisi beberapa browser */

-moz-transition: all 1s ease-in-out;

-o-transition: all 1s ease-in-out;

font:18px Times;  /*  besar font dan jenis font silahkan anda ganti  */
font-weight: bold;  /*  font dengan cetak tebal  */
color: #FF0000;  /*  warna font bisa anda ganti dengan punya anda  */
margin: 20px;  /*  jarak tulisan dengan sisi kiri  */
text-align: center;  /*  letak tulisan di tengan  */
padding: 10px;  /*  jarak tulisan dengan border atas dan bawah  */
border-radius: 12px;  /*  merah durasi kelengkungan border untuk beberapa browser  */

-moz-border-radius: 12px;

-webkit-border-radius: 12px;

background: #A9D0F5;  /*  warna background bisa anda ganti dengan warna anda  */
}

Ketika anda ingin menggunakannya dalam postingan, masuk ke Edit HTML sebelah Compose kanan atas posting lalu masukkan kode di bawah ini (panggil kode)

<div class="testtransform geseratas">TRANSISI ATAS</div>

Silahkan ganti tulisan TRANSISI ATAS dengan tulisan yang anda inginkan atau masukkan gambar. Untuk memasukkan gambar contoh kodenya seperti berikut.

<div class="testtransform geseratas"><img alt="judul gambar anda" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiincU3LwcwwdaMxpkysI5QirH7x1ILxkVbTvkVpwzuMCRBunszZfkm1DT_3mtFY5N0gFJFQdH1hFbP5uZumSeQCNZqPPCJIXFvdG4pVjkB0nJkjKLGl1GP5FkIXAK4XErlERTfHFmkssMg/s1600/gadis+muda+seksi+hot+02.jpg" /></div>

Ok gan...cukup sampai di sini dulu, kalau masih kurang...jangan segan-segan komentar atau meninggalkan pesan lewat Buku Tamu atau langsung lewat emal...tapi kasih tau lagi di buku tamu kalau anda sudah mengirim pesan lewat email yaaa....Makasih dan jangan lupa Comment nnnyyyuuuuuu.....

"keep spirits and do the best"