使用JavaScript旋转div

Question

对不起，标题并不是我想用JavaScript实现的具体内容。

我想创建一个效果，其中div（黑色矩形）在X轴上旋转并且正在运行 向下。就像翻转它向下移动一样。

请不要jQuery！

任何暗示都会受到赞赏。

我想要实现的效果图像：

＆＃13;

＆＃13;

//don't know what to do in flip function
function flip(a,b) {
    var d=document.getElementById('box');
    d.style.transform="rotateX("+a+"deg)";
    d.style.transformOrigin=b;
    //alert(b);
}

setTimeout(function() {
    flip(180, "bottom");
}, 1000);

setTimeout(function() {
    flip(180, "top");
}, 2000); 

＆＃13;

.box {
    left:0px;
    top:0px;
    height:100px;
    width:100px;
    transition-property:all;
    transition-duration:1s;
    
    position:absolute;
    background-color:#555;
}

＆＃13;

<div class="box" id="box"> </div>

＆＃13;

＆＃13;

＆＃13;