<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>
您好，可以先画一个有立体感的球体，或者直接网上找个图片，然后给这个球体添加动画，选择强调里的陀螺旋，在效果选项里将重复次数自行设定，就可以实现让球体在地上滚动的效果。同时还可借助在图片上覆盖诸如半透明灰色和半透明白色的圆形形状来实现球体高光的视觉错觉，让滚动显得更加真实。当然，如果像前面的人所说的地球自转，我没想到实现办法。不过说回来，PPT本身只是个平面软件，所以只能靠一系列平面的视觉错觉来营造一种立体感。
