Spyning icon Rotasi pada gambar menggunakan css3

Kali ini kita akan membuat rotasi pada gambar menggunakan kode html dan css3. Trik ini dapat anda gunakan untuk menu animasi, header animasi dan lain-lain yang ada animasinya.

Seperti biasanya kita mulai dengan kode CSS..
Berikut kode CSS3 nya :

<style>

#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

#socialicons2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}

#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}

#socialicons3 img:hover{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}

</style>

Berputar bolak balik 360 derajat jika mouse mendekati objek

<div id="socialicons">
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/rss.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/delicious.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/facebook.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/twitter.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/yahoo.png" /></a></div>

Berputar 60 derajar jika mouse mendekati objek atau menjauhi

<div id="socialicons2">
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/rss.png" /></a>
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/delicious.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/facebook.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/twitter.png" /></a><a href="http://codestyle.blogspot.com/">
<img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/yahoo.png" /></a></div>

Berputar terbalik 360 derajar jika mouse mendekati objek saja

<div id="socialicons3">
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/rss.png" /></a>
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/delicious.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/facebook.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/twitter.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/yahoo.png" /></a></div>

Bagaimana, mudah bukan? segalanya kini lebih mudah dengan adanya fitur html5 dan css3. semoga bermanfaat ...

Membuat Layout Koran dengan CSS3 Update

Pada umumnya kita menggunakan tag tabel untuk membuat kolom. Dengan adanya css3 hal ini dapat di atasi dengan trik menggunakan tag coloumn.

Kali ini kita akan membuat layout koran dengan kode css sebagai berikut :
<style>.koran {text-align:justify; -moz-column-count: 3; /* kolom 3 bilah */ -moz-column-gap: 20px; /* lebar masing-masing kolom 20px */ -moz-column-rule: 0.5px solid black; /* kolom dipisahkan pembatas dgn tebal 0.5px garis hitam */ }</style>

dan untuk kode htmlnya adalah :
<div class='koran'>ISI TULISAN</div>

* ISI TULISAN di ganti dengan isi posting anda.

bagaimana hasilnya? Mudah bukan?
Sebarlah artikel ini jika bermanfaat dan jangan sungkan sungkan bertanya jika mendapatkan kendala melalui kolom komentar.

Hasilnya :

Pada umumkya kita menggunakan tag tabel untuk membtat kolom. Dengan adanya css3 hal ini dapat di atasi dengan trik menggunakan tag coloumn.

Kali ini kita akan membuat layout koran dengan kode css sebagai berikut :Pada umumkya kita menggunakan tag tabel untuk membtat kolom. Dengan adanya css3 hal ini dapat di atasi dengan trik menggunakan tag coloumn.

Kali ini kita akan membuat layout koran dengan kode css sebagai berikut :Pada umumkya kita menggunakan tag tabel untuk membtat kolom. Dengan adanya css3 hal ini dapat di atasi dengan trik menggunakan tag coloumn.

Kali ini kita akan membuat layout koran dengan kode css sebagai berikut :Pada umumkya kita menggunakan tag tabel untuk membtat kolom. Dengan adanya css3 hal ini dapat di atasi dengan trik menggunakan tag coloumn.

Kali ini kita akan membuat layout koran dengan kode css sebagai berikut :Pada umumkya kita menggunakan tag tabel untuk membtat kolom. Dengan adanya css3 hal ini dapat di atasi dengan trik menggunakan tag coloumn.

Kali ini kita akan membuat layout koran dengan kode css sebagai berikut :Pada umumkya kita menggunakan tag tabel untuk membtat kolom. Dengan adanya css3 hal ini dapat di atasi dengan trik menggunakan tag coloumn.

Kali ini kita akan membuat layout koran dengan kode css sebagai berikut :Pada umumkya kita menggunakan tag tabel untuk membtat kolom. Dengan adanya css3 hal ini dapat di atasi dengan trik menggunakan tag coloumn.

Kali ini kita akan membuat layout koran dengan kode css sebagai berikut :Pada umumkya kita menggunakan tag tabel untuk membtat kolom. Dengan adanya css3 hal ini dapat di atasi dengan trik menggunakan tag coloumn.

Kali ini kita akan membuat layout koran dengan kode css sebagai berikut :Pada umumkya kita menggunakan tag tabel untuk membtat kolom. Dengan adanya css3 hal ini dapat di atasi dengan trik menggunakan tag coloumn.

Kali ini kita akan membuat layout koran dengan kode css sebagai berikut :Pada umumkya kita menggunakan tag tabel untuk membtat kolom. Dengan adanya css3 hal ini dapat di atasi dengan trik menggunakan tag coloumn.

Kali ini kita akan membuat layout koran dengan kode css sebagai berikut :