Mau tau cara buat yang seperti ini, silahkan klik disini

widget by Kianhome
KianHome - Perkembangan CSS3 saat ini sudah sangat terasa luar biasa, dimana sebuah efek bisa ditambahkan hanya dengan menggunakan kode CSS saja didalamnya tanpa ada tambahan kode Java dan animasi flash didalamnya.

Untuk saat ini kita akan membahas mengenai "Efek Transition dengan CSS3", simak tutorialnya berikut ini :

Efek Transisi atau efek perubahan pada pola dasar ke pola yang ditambahkan dengan efek transisi, dirasakan sama baik dengan menggunakan pola kode java sekalipun. Berikut ini adalah kode Transisi berputar dengan pola 180 derajat.

contoh transisi pada box
.test{padding:10px;
width:100px;
height:100px;
background:#f2d2d2;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s,
-moz-transform 2s; /* Firefox 4 */}

.test:hover{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg);
Penjelasan:
Dari contoh kode diatas didapati pola dalam membuat efek itu sendiri tidaklah sulit, hanya beberapa kode yang harus diperhatikan,
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s,
-moz-transform 2s;
Pada kode diatas terdapat kode yang berwarna merah, dimana itu menunjukkan kecepatan dari efek transisi yang akan diberi. Pada kode diatas kecepatannya adalah 2s atau 2 second. Jika kamu ingin membuat efek lebih cepat maka kecepatannya dibuat lebih kecil, ingin lebih lambat atau slow kecepatannya dibuat lebih besar.
-moz-transform:rotate(180deg)
Karena efek transisi yang digunakan adalah pola rotasi (berputar) maka kita menggunakan perintah memutar dengan perhitungan dalam derajat. seperti contoh box yang dibuat menggunakan rotasi 180 derajat, jika efek yang diberikan ingin cantik sebaiknya gunakan beberapa variasi untuk rotasinya. Bisa dengan efek 360 derajat, 200 derajat atau berapapun sesuai dengan keinginan dari kamu.

Selamat mencoba..

Kode diatas hanya berjalan pada Browser Firefox saja, Untuk beberapa browser yang biasa kamu gunakan bisa juga ditambahkan kode berwarna "orange" sebagai berikut:
.test{padding:10px;
width:100px;
height:100px;
background:#f2d2d2;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s,
-moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}
.test:hover{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */}

Share to :

Related Post :


About the Author :

K'ian is a designer, web tutorial design, and blogging enthusiasts. Tutorial blog debut the first time when entering college, when I get to know the world wide internet and so much more. Now I work at one of the state trading company, a job that would conflict with the world of blogging and web design. Today remains a serious manage blog " Kolam Blogging Tips | Kianhome ".

7 Response to "CSS3 : Efek Transisi Rotasi dengan simple dan sederhana"

  1. CSS 3 mang keren bgt dah sob, testing dulu ah ...Replay

     






  2. Pengen yang lebih seru ...
    Ayo kunjungi www.asianbet77.com
    Buktikan sendiri ..

    Real Play = Real Money

    - Bonus Promo Red Card pertandingan manapun .
    - Bonus Mixparlay .
    - Bonus Tangkasnet setiap hari .
    - New Produk Sabung Ayam ( minimal bet sangat ringan ) .
    - Referal 5 + 1 % ( seumur hidup ) .
    - Cash Back up to 10 % .
    - Bonus Royalty Rewards setiap bulan .

    untuk Informasi lebih jelasnya silahkan hubungi CS kami :
    - YM : op1_asianbet77@yahoo.com
    - EMAIL : asianbet77@yahoo.com
    - WHATSAPP : +63 905 213 7234
    - WECHAT : asianbet_77
    - SMS CENTER : +63 905 209 8162
    - PIN BB : 2B4BB06A / 28339A41

    Salam Admin ,
    http://asianbet77.com/
    ...Replay

     

Post a Comment

Blog ini menganut sistem "Dofollow", Silahkan Tinggal komentar, saran, kritik disini.. apapun itu jangan SPAM ok..


Berita Terkini

Friend Follower's

Tips Health

Techno

Hot Nasional

Celebrity

My Blog List

Recent Comment

© Copyright 2011 | Dikelola sepenuhnya oleh : Kiancoi
KianHome Member of PlanetBlog | SitusBersih | Support on Mozilla Firefox and Google Crome Browser
Home | Posts RSS | Comments RSS | Sexy Blog |