Cara membuat objek berputar 360 derajat dengan CSS


rotasi objek dengan css,rotasi objek,cara membuat objek dengan css,cara memutar objek,css,panduan css,tutorial,free,download,ebook
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>














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

0 komentar