Memahami CSS3 Transition - Transformation

Asal usul biasanya sering dianggap penting bagi banyak orang. Asal-usul, lhoh, bukan "asbun"! Ya ..., beberapa posting tentang CSS3, yang telah terbit beberapa waktu belakangan ini semuanya sudah dalam bentuk barang jadi. E ... kali-kali saja sampeyan juga ada yang pingin tahu asal-usul atau asal-muasal kode-kode CSS tersebut bisa membentuk sebuah fungsi baru yang bahkan membentuk beberapa animasi yang cukup menarik. Hal seperti ini mungkin akan cukup penting untuk kita pelajari dan pahami bersama. Yah ..., barangkali saja nanti kita butuhkan di saat kita pingin memodifikasi blog biar kelihatan lebih gaya, gitu lhoh! He ... he ... lhah-lhoh, lhah ...lhoh, kaya perjaka belasan tahun yang masih suka cinta munyuk saja, he ... he ... Nggak papa to ,Mbul? "Biar awet muda, dong! Biar kepala bothak dan rambut ubanan, yang penting rambut yang lain masih hitam tebal plus gondrong, khan?! He ... Bener, nggak?!" Ah , .., sampeyan ...! Kenapa justru malahan periksa punya sendiri? Punya aku nih, lhoh, yang sudah bothak ubanan? Atau justru milik sampeyan "yang itu" yang justru sudah bothak dan ubanan? He ... he ... Coba saja periksa sekali lagi ... He ... mumpung nggak ada orang, he ....

Memahami fungsi dan kegunaan CSS3 memang menjadi sesuatu hal yang baru dan aku rasa wajib bagi kita untuk mempelajarinya. Yah ... di masa ke depan kode ini mungkin saja menjadi kode yang mampu menggantikan hebatnya javascript, misalnya (dalam beberapa fungsi tertentu). Hal yang mungkin saja terjadi menilik beberapa kehebatan yang dapat kita lihat belakangan ini. Yap ... terutama dalam bentuk animasi yang ternyata cukup menjanjikan dan menakjubkan.

Dalam demo yang telah akau buat, sampeyan bisa melihat beberapa tampilan animasi yang hanya memfungsikan CSS3. Silahkan lihat dan cermati. O ..., ya, sementara demo bisa sampeyan buka dengan KLIK DEMO di bawah, untuk bentuk kode CSSnya, silahkan sampeyan lihat melalui posting ini. Biar tengok kanan, tengok kiri sambil mengolahragakan leher, gitu, lhoh, broer!

D E M O

Kode CSS

<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: #0000CC;
     margin: 20px;
     text-align: center;
     padding: 10px;
     border-radius: 12px;
     -moz-border-radius: 12px;
     -webkit-border-radius: 12px;
     background: #FFFF99;
     }
.testtransform-2 {
     width: 180px;
     height: 300px;
     background: url(http://img.theomegaproject.org/thumbs/2009/05/93.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: #FF00FF;
    }
.border:hover {
    border: 5px solid red;
    }
.bgborder:hover {
    background: #FF00FF;
    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: #00FF00;
    background: #FF9900;
    border: 5px solid #3399FF;
    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 HTML

<div class="testtransform geseratas">Slide up</div>
<div class="testtransform geserbawah">Slide down</div>
<div class="testtransform geserkanan">Slide right</div>
<div class="testtransform geserkiri">Slide left</div>
<div class="testtransform gesernantas">Slide into the top right</div>
<div class="testtransform geserkibaw">Slide into the bottom left</div>
<div class="testtransform bg">changes in the background</div>
<div class="testtransform border">changes at the border</div>
<div class="testtransform bgborder">changes in the background and border</div>
<div class="testtransform opa">changes in the opacity</div>
<div class="testtransform ukuran">changes in scale</div>
<div class="testtransform gabungan">combination of several transformations</div>
<div class="testtransform-2" style="float:none;margin:20px auto;"> </div>

Setiap kode HTML dan kode CSS di atas menjalankan satu fungsi seperti yang terlihat dalam demo. Bentuk konkrit setiap fungsi adalah sebagai berikut (satu contoh pada Slide up):

Kode CSS Slide up

Kode CSS di ambilkan dari syntax .testtransform dan hovernya.

.geseratas {
     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: #0000CC;
     margin: 20px;
     text-align: center;
     padding: 10px;
     border-radius: 12px;
     -moz-border-radius: 12px;
     -webkit-border-radius: 12px;
     background: #FFFF99;
     }
.geseratas:hover {
    -webkit-transform: translate(0,-20px);
    -moz-transform: translate(0,-20px);
    -o-transform: translate(0,-20px);
    }

Dari kode CSS baru di atas bentuk kode HTML-nya menjadi seperti ini :

<div class="geseratas">Slide up</div>

Hal ini akan sama hasilnya apabila kita masih menggunakan kode asli, dengan bentuk kode HTML :

<div class="testtransform geseratas">slide up</div>

Begitu pula yang Slide down:

Kode CSS Slide down

.geserbawah {
     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: #0000CC;
     margin: 20px;
     text-align: center;
     padding: 10px;
     border-radius: 12px;
     -moz-border-radius: 12px;
     -webkit-border-radius: 12px;
     background: #FFFF99;
     }
.geserbawah:hover {
    -webkit-transform: translate(0,20px);
    -moz-transform: translate(0,20px);
    -o-transform: translate(0,20px);
    }

Kode HTML Slide down

<div class="geserbawah">Slide down</div>

Kode HTML ini juga akan berfungsi sama saat kita gunakan kode CSS aslinya dengan Kode HTML :

<div class="testtransform geserbawah">Slide down</div>

Begitu seterusnya yang berlaku di semua fungsi, hanya khusus pada satu fungsi yang berbackground gambar, kode CSS kita ambil dari syntax .testtransform-2, dengan bentuk

Kode CSS

.testtransform-2 {
     border: 5px solid green;
     margin: 20px;
     padding: 10px;
     border-radius: 12px;
     -moz-border-radius: 12px;
     -webkit-border-radius: 12px;
     width: 180px;
     height: 300px;
     background: url(http://img.theomegaproject.org/thumbs/2009/05/93.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; 
    }
.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);
    }

Kode HTML-nya sebagai berikut:

<div class="testtransform-2" style="float:none;margin:20px auto;"> </div>

Kode ini akan berfungsi sama saat kita menggunakan kode css aslinya dengan kode HTML yang sama pula :

<div class="testtransform-2" style="float:none;margin:20px auto;"> </div>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «