使用CSS3实现3D小球动画效果

要使用CSS3实现3D小球动画效果，你可以使用transform属性，特别是它的rotateX(), rotateY(), 和 translateZ() 函数。下面是一个简单的示例，展示如何创建一个3D小球动画：

1. HTML结构:

<div class="scene">
    <div class="ball"></div>
</div>

2. 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空间中旋转。

你可以根据需要调整透视距离、小球的尺寸、颜色和位置，以及动画的速度和方向。