CSS3 过渡效果：JavaScript 触发从上向下位移

可以通过 JavaScript 来触发 CSS3 过渡从上向下距离顶部的高度。具体实现步骤如下：

首先，需要定义一个触发事件，比如点击按钮或者滚动到某个位置。
在事件触发时，通过 JavaScript 获取需要进行过渡效果的元素。
然后，设置元素的 CSS 属性，比如 'top' 或者 'transform'，使元素产生从上向下的位移效果。
最后，通过 CSS3 过渡属性 'transition' 来控制过渡效果的持续时间和动画效果。

以下是一个示例代码，实现了通过点击按钮触发从上向下距离顶部 100px 的过渡效果：

HTML 代码：

<button id='btn'>点击</button>
<div id='box'>这是一个元素</div>

CSS 代码：

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

JavaScript 代码：

var btn = document.getElementById('btn');
var box = document.getElementById('box');

btn.addEventListener('click', function() {
  box.style.top = '100px';
});