CSS3 过渡效果：元素从顶部平滑移动到 30px

可以使用以下 CSS 代码来实现这个过渡效果：

.box {
  position: relative;
  top: 0;
  transition: top 0.5s ease;
}

.box:hover {
  top: 30px;
}

在这个例子中，我们首先把 '.box' 元素的初始位置设置为 'top: 0'，然后通过 'transition' 属性来指定过渡效果的持续时间和缓动函数。接着，在 '.box:hover' 伪类中，我们把 'top' 属性的值改为 '30px'，从而触发过渡效果。当鼠标移开时，元素又会回到原来的位置。

你也可以根据需要调整过渡效果的时间和缓动函数，使其更加符合你的设计需求。