css3过渡从顶部top0px到top30px

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

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

.box:hover {
  top: 30px;
}

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

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