CSS3动画是网页设计中常用的一种技术，能让网页更加生动有趣。其中一个非常实用的动画效果是摆动效果，通过简单的代码实现一个物体不断摆动起来。下面我们来看看如何利用CSS3实现这种摆动效果。

.swing {
animation-name: swing;
animation-duration: 2s;
animation-iteration-count: infinite;
transform-origin: bottom center;
transform-style: preserve-3d;
}
@keyframes swing {
0%,
100% {
transform: rotate(0deg);
}
20% {
transform: rotate(15deg);
}
40% {
transform: rotate(-10deg);
}
60% {
transform: rotate(5deg);
}
80% {
transform: rotate(-5deg);
}
}

在上面的代码中，我们定义了一个名为.swing的class，把这个class应用到需要实现摆动效果的物体上。接着，在.style中定义了几个关键属性：

• animation-name：指定本动画的名称。
• animation-duration：指定动画的持续时间。
• animation-iteration-count：指定动画的播放次数，这里我们设置为无限循环。
• transform-origin：指定物体绕着哪个点进行旋转。
• transform-style：指定物体的子元素是否需要保持原来的3D状态。

接着，在代码的最后面定义了一个名为swing的关键帧动画。在这里，我们分配了摆动效果的各个节点状态，使物体不断地在正负15度之间进行随机的旋转。

利用上面这段代码，就可以轻松地为页面元素添加摆动效果了。大家可以自行根据需要进行调整，创造出更加炫酷的效果。