<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本身只是个平面软件，所以只能靠一系列平面的视觉错觉来营造一种立体感。问问题要有逻辑，要描述清楚需求，语言无法表达的就配图，不然别人根本不知道你要的什么。首先：轴向有3个：x、y、z，都可以理解为某一方向的中心，你要围绕那根转呢？然后：多张图片的合集在空间上有一个共有的全局x、y、z轴接着：每张图片又有自己局部的x、y、z轴你是要全局轴上转还是局部轴上转或者全局和局部轴都转呢？如果你要都转的话，就像地球自转公转一样，那你自转时方向跟公转统一还是反向或是随机呢？每张图片自转速度要统一还是要随机呢，随机速度值有个参考范围么？问题描述不清楚，就包含了很多可能性，你如果问：很多张图片围一个圆圈，图片围绕圆心旋转，那这个问题大方向就只有两个可能了：形式1：“ ⊙ ” 外圈是图片路径，中点是圆心形式2： ”中 ” 口字是图片，中间竖线是圆心 ( 2即把形式1视角方向旋转90度以后的视角 )
