<html>
<head>
<title>new document </title>
<meta charset="utf-8">
<style>
@-webkit-keyframes change{
0%{
transform:rotatez(-20deg) rotatey(20deg)
}
50%{
transform:rotatez(-20deg) rotatey(170deg)
}
100%{
transform:rotatez(-20deg) rotatey(360deg)
}
}
body{
perspective:1200px
}
div{
transform-style:preserve-3d
width:800px
height:600px
transform:rotatez(-20deg) rotatey(20deg)
position:relative
transform-origin:500px 300px 0px
-webkit-animation:change 2s linear infinite
}
div:hover{
}
span{
display:block
width:400px
height:400px
border:2px solid blue
border-radius:50%
position:absolute
top:100px
left:300px
}
#s1{
transform:rotatey(0deg) translatez(0px)
}
#s2{
transform:rotatey(30deg) translatez(0px)
}
#s3{
transform:rotatey(60deg) translatez(0px)
}
#s4{
transform:rotatey(90deg) translatez(0px)
}
#s5{
transform:rotatey(120deg) translatez(0px)
}
#s6{
transform:rotatey(150deg) translatez(0px)
}
#s7{
transform:rotatey(180deg) translatez(0px)
}
#s8{
transform:rotatey(210deg) translatez(0px)
}
#s9{
transform:rotatey(240deg) translatez(0px)
}
#s10{
transform:rotatey(270deg) translatez(0px)
}
#s11{
transform:rotatey(300deg) translatez(0px)
}
#s12{
transform:rotatey(330deg) translatez(0px)
}
#d1{
transform:rotatex(0deg) translatez(0px)
}
#d2{
transform:rotatex(30deg) translatez(0px)
}
#d3{
transform:rotatex(60deg) translatez(0px)
}
#d4{
transform:rotatex(90deg) translatez(0px)
}
#d5{
transform:rotatex(120deg) translatez(0px)
}
#d6{
transform:rotatex(150deg) translatez(0px)
}
#d7{
transform:rotatex(180deg) translatez(0px)
}
#d8{
transform:rotatex(210deg) translatez(0px)
}
#d9{
transform:rotatex(240deg) translatez(0px)
}
#d10{
transform:rotatex(270deg) translatez(0px)
}
#d11{
transform:rotatex(300deg) translatez(0px)
}
#d12{
transform:rotatex(330deg) translatez(0px)
}
p{
width:2px
height:505px
position:absolute
top:46px
left:500px
border:2px solid red
border-radius:3px
}
</style>
</head>
<body>
<div>
<p></p>
<span id="s1"></span>
<span id="s2"></span>
<span id="s3"></span>
<span id="s4"></span>
<span id="s5"></span>
<span id="s6"></span>
<span id="s7"></span>
<span id="s8"></span>
<span id="s9"></span>
<span id="s10"></span>
<span id="s11"></span>
<span id="s12"></span>
<span id="d1"></span>
<span id="d2"></span>
<span id="d3"></span>
<span id="d4"></span>
<span id="d5"></span>
<span id="d6"></span>
<span id="d7"></span>
<span id="d8"></span>
<span id="d9"></span>
<span id="d10"></span>
<span id="d11"></span>
<span id="d12"></span>
</div>
</body>
</html>
html
<img src="图片地址" />css
img{transition:transform 3s -webkit-transition:-webkit-transform 3s}img:hover{transform:rotate(360deg) -webkit-transform:rotate(360deg)}
css 有个 animation 可以实现动画，仅仅是动起来，没法实现实时与系统对时（需要js）60秒跳动60次旋转360度。（可以使用linear 线性运动）
# animation:anim_mm 60s linear infinite
animation:mm 60s steps(60) infinite
@keyframes mm{
to{ transform:rotate(360deg) }
}
