Membuat Objek berputar 360 Derajat dengan CSS

Sobat, ini saya mau share tentang bagaimana cara membuat sebuah animasi objek yaitu dengan memutar sebuah objek sebanyak 360 derajat. Disini kita akan melakukannya dengan menggunakan bantuan script CSS. Ternyata CSS sekarang sudah semakin maju ya. Hehehe bisa memutar objek. Tanpa panjang lebar, langsung saja kita ke TKP. 

Silahkan Tuliskan kode berikut :

<style>
.rotasi {
background: green;
width: 200px;
height: 200px;
margin: auto;
color: darkblue;
border: solid 3px darkblue;
text-align: center;
font-family: Arial, sans-serif;
font-size: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: -webkit-transform 1s linear;
-moz-transition: -moz-transform 1s linear;
-ms-transition: -ms-transform 1s linear;
-o-transition: -o-transform 1s linear;
transition: transform 1s linear;
float: left;
margin-right: 60px;
padding-top: 76px;
        }

.rotasi:hover {
                color : red;
cursor: pointer;
}
.objek:hover {
-webkit-transform: rotate(400grad);
-moz-transform: rotate(400grad);
-ms-transform: rotate(400grad);
-o-transform: rotate(400grad);
transform: rotate(400grad);
}
</style>
<div class="rotasi objek">Arahkan mouse pointer kemari...</div>


Arahkan mouse pointer kemari...

Sedikit CAtatan :
Mozilla tidak men-support teknik ini. Coba buka dan lihat hasilnya menggunakan Opera...