July 25, 2024

Membuat Objek Berputar Menggunakan Kode CSS

1 min read

Halo warga PalComTech!

Jumpa lagi dengan saya, tentunya kali ini dengan tutorial yang berbeda. Pada tutorial ini kita akan membahas, bagaimana cara membuat objek berputar menggunakan kode css. Bagaimana? penasarankan? yuk kita simak hasil dari project yang akan kita buat. Klik disini untuk melihat hasil projectm bagus bukan?, kalau begitu mari kita simak tutorialnya.

Langkah 1

Contoh gambar yang saya gunakan:

Setelah itu buatlah file html yang baru, kemudian Copy-paste kode HTML yang saya gunakan dibawah ini. Dalam hal ini saya menggunakan class selector dengan nama selecetor class ” rotate ” yang akan saya panggil dengan kode css dan agar mempermudah pemanggilannya nanti.

Perhatikan pada kode img src="../images/blog.png", isikan alamat gambar yang akan dipilih. Contohnya:

<img src="http://news.palcomtech.com/wp-content/uploads/2012/10/yahoo.png"

Berikut kode html yang dimaksud:

[sourcecode languege=”php”]
<html>
<head>
<title> Objek Berputar </title>
<link rel="stylesheet" type="text/css" href="berputar.css"/>
</head>
<body>
<table width="300" height="162" border="0" align=โ€centerโ€ >
<tr>
<td>
<div class="rotate">
<a href="#"> <img src="../images/blog.png" width="150" height="150" /> </a>
</div>
</td>
<td>
<div class="rotate">
<a href="#"> <img src="../images/facebook.png" width="150" height="150" /> </a>
</div>
</td>
<td>
<div class="rotate">
<a href="#"> <img src="../images/ym.png" width="150" height="150" /> </a>
</div>
</td>
<td>
<div class="rotate">
<a href="#"> <img src="../images/twitter.png" width="150" height="150" /> </a>
</div>
</td>
</tr>
</table>
</body>
</html>
[/sourcecode]

Langkah 2

Selanjutnya kita tambahkan kode css seperti dibawah ini

[sourcecode languege=”php”]

.rotate {
-moz-transition:all .8s ease-in-out;
-ms-transition:all .8s ease-in-out;
-o-transition:all .8s ease-in-out;-webkit-transition:
all .8s ease-in-out;
transition:all .8s ease-in-out;
}
&nbsp;

.rotate:hover{
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
[/sourcecode]

Keterangan :

.rotate

Adalah jenis selector yang kita gunakan, saya menggukan class selector dengan nama rotate. Jadi untuk pemanggilan class selector menggunakan tanda titik ( . ).

-moz-transition dan webkit-transition

Efek untuk animasi tersebut sehingga dapat terlihat dibrowser mozilla, internet explorer, opera mini dan google chrome.

.8s ease-in-out

Dimana .8s adalah waktu atau kecepatan gerak pada objek yang berputar untuk memperlambat gerakan obje pada saat berputar bisa kita rubah seperti 0.6s dengan gerakan objek berputar cukup lambat. Sendangkan ease-in-out ada type efek yang kita gunakan.

Transform:rotate(360deg)

Adalah rotasi perputaran abjek gambar dengan sudut perputaran 360 derajat jarum jam, kita juga bisa merubah rotasi perputaran objek hingga sesuai kebutuhan kita.

Tenang saja, kalau teman-teman masih gagal dalam mengikuti tutorial ini. Silahkan [download id=”432″]nya disini, jadi anda bisa belajar lebih jelas lagi.

Baiklah sampai disini dulu tutorial saya, sampai jumpa di artikel selanjutnya!.

0 thoughts on “Membuat Objek Berputar Menggunakan Kode CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © All rights reserved. | Newsphere by AF themes.