CSS 中，通过使用 transform 属性可以控制元素的 3D 动画效果。transform 属性以转换的方式来操作 HTML 元素的外观，包括旋转、缩放、移动和倾斜等。其中，3D 动画效果是通过使用 transform 中的 translate3d()、rotateX()、rotateY()、rotateZ() 和 perspective() 等函数来实现的。
translate3d() 函数可以实现元素的平移，它接受三个参数，分别表示元素在 x、y 和 z 轴上的平移距离。
rotateX()、rotateY() 和 rotateZ() 函数可以实现元素的沿着 x、y 和 z 轴旋转，它们接受一个参数，表示元素旋转的角度。
perspective() 函数可以设置元素的透视效果，它接受一个参数，表示透视距离。
除此之外，还可以使用 transform-style 属性来控制元素的 3D 效果，它有两个可选值：preserve-3d 和 flat，分别表示保留元素的 3D 效果和将元素展示为 2D 效果。
例如，下面的代码可以实现一个立方体的 3D 动画效果：
.cube {
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d;
animation: rotate 3s infinite linear;
}
.cube .face {
position: absolute;
width: 100px;
height: 100px;
background-color: #ccc;
opacity: 0.8;
border: 1px solid #999;
}
.cube .face.front {
transform: translateZ(50px);
}
.cube .face.back {
transform: rotateY(180deg) translateZ(50px);
}
.cube .face.right {
transform: rotateY(90deg) translateZ(50px);
}
.cube .face.left {
transform: rotateY(-90deg) translateZ(50px);
}
.cube .face.top {
transform: rotateX(90deg) translateZ(50px);
}
.cube .face.bottom {
transform: rotateX(-90deg) translateZ(50px);
}
@keyframes rotate {
0% { transform: rotateX(0) rotateY(0) rotateZ(0); }
100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}其中，.cube 表示立方体元素，.face 表示立方体的六个面。通过给每个面设置不同的 transform 属性，可以实现立方体的 3D 效果。最后，通过使用 animation 属性和 @keyframes 规则，可以让立方体无限循环地旋转。