＄
<!DOCTYPE html>
<html>
<head>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script>
var i=0;
$(document).ready(function(){
setInterval('gaibian()',1000);
});
function gaibian(){
if(i==0){
i=1;
$("#wo").removeClass("zhuan_left");
$("#wo").addClass("zhuan_right");
}else{
i=0;
$("#wo").addClass("zhuan_left");
$("#wo").removeClass("zhuan_right");
}
}
</script>
<style>
.zhuan_left{
transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
}
.zhuan_right{
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
img {
transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
-webkit-transition: all 1s ease-in-out 0s;
-o-transition: all 1s ease-in-out 0s;
-moz-transition: all 1s ease-in-out 0s;
transition: all 1s ease-in-out 0s;
}
</style>
<style>
div{
height: 120px;
margin: 0 auto;
text-align: center;
width: 200px;
}
</style>
</head>
<body>
<div><img id='wo' src="img/1.jpg" style="width: 100%;"/></div>
</body>
</html>
//2、利用css3動畫
#hand{
-webkit-animation:swinging 2s ease-in-out 0s infinite;
-moz-animation:swinging 2s ease-in-out 0s infinite;
animation:swinging 2s ease-in-out 0s infinite;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
@-webkit-keyframes swinging{
0% { -webkit-transform: rotate(10deg); }
50% { -webkit-transform: rotate(-10deg); }
100% { -webkit-transform: rotate(10deg); }
}＠＄
