div轮播问题

Question

三个按钮，对应三个垂直的div顺序排列，点击第二个div的按钮，第二个div滑动到第一个div的位置，第三个div滑动到第二个div的位置。第一个div滑动到最下面。三个div都是同时显示。
个人觉得这个是轮播的问题，但是也有些不同，请大家指教

下面是代码。已经可以实现基本的功能，但是滑动效果怎么弄，都是向上滑动的、还有感觉自己写的繁琐，有什么修改建议么

$(document).ready(function(){

    $(".div2btn").click(function(){
        $(".div2").css("transform","translateY(-100px)");
        $(".div3").css("transform","translateY(-100px)");
        $(".div1").css("transform","translateY(200px)")
});
    $(".div3btn").click(function(){
        $(".div2").css("transform","translateY(0px)");
        (".div3").css("transform","translateY(-200px)");
        $(".div1").css("transform","translateY(200px)");
});
    $(".div1btn").click(function () {
        $(".div2").css("transform","translateY(0px)");
        $(".div3").css("transform","translateY(0px)");
        $(".div1").css("transform","translateY(0px)");      
});

});

<div style="width: 500px;height: 400px;border: 1px solid black;">

        <div style="float: left;width: 100px;height: 100%;border: 1px solid red;"> 
            <input class="div1btn" type="button" value="button1" />
            <input class="div2btn" type="button" value="button2" />
            <input class="div3btn" type="button" value="button3" />
        </div>
        
        <div style="float: left;width: 350px;height: 100%; margin-top: 30px;">
            <div class="div1" style="width: 350px;height: 100px;background-color:bisque;">
                1111
            </div>
        <div class="div2" style="width: 350px;height: 100px;backgroundcolor:blueviolet;">
            22222222
        </div>
        <div class="div3" style="width: 350px;height: 100px;background-color: green;">
                33333333
        </div>
    </div>
</div>

Answer 1

其实比你想的简单的多，滑动的图片其实已经排列好的顺序位置，等待你的css变化而变化，常见有

transform: translateX(xxxx)

但是同时对所有的图片设定滑动后的下一刻对应的css位置，然后触发的时候 就能达到你要的效果了

Answer 2

就是一个排序问题 通过点击第几个div来判断给div更换class类名 在使用transition做平滑过渡就行了