要使用CSS3实现3D小球动画效果，你可以使用transform属性，特别是它的rotateX(), rotateY(), 和 translateZ() 函数。下面是一个简单的示例，展示如何创建一个3D小球动画：
- HTML结构:
<div class="scene"><div class="ball"></div>
</div>
- CSS样式:
body {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;
}.scene {perspective: 1000px; /* 设置3D场景的透视距离 */width: 200px;height: 200px;position: relative;transform-style: preserve-3d; /* 使子元素在3D空间中呈现 */animation: rotateScene 5s infinite linear; /* 动画效果 */
}.ball {width: 100px;height: 100px;background-color: red;border-radius: 50%; /* 使div变成圆形 */position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) translateZ(50px); /* 将小球移动到场景中心并向前移动50px */
}@keyframes rotateScene {from {transform: rotateY(0deg);}to {transform: rotateY(360deg);}
}
在这个示例中，.scene元素创建了一个3D场景，并设置了一个透视距离。.ball元素代表小球，被放置在场景的中心，并向前移动了一定的距离（通过translateZ()）。最后，通过@keyframes和animation属性，我们为场景添加了一个旋转动画，使小球看起来在3D空间中旋转。
你可以根据需要调整透视距离、小球的尺寸、颜色和位置，以及动画的速度和方向。
