纯CSS 实现鼠标悬停菜单栏3D翻滚的效果

效果展示：

html：

 <div class="test55">
                        <div class="test5">
                                <div class="box1">菜单</div>
                                <div class="box2">菜单</div>
                        </div>
                        <div class="test5">
                                <div class="box1">视频</div>
                                <div class="box2">视频</div>
                        </div>
                        <div class="test5">
                                <div class="box1">主页</div>
                                <div class="box2">主页</div>
                        </div>
                        <div class="test5">
                                <div class="box1">资讯</div>
                                <div class="box2">资讯</div>
                        </div>
                        <div class="test5">
                                <div class="box1">详情</div>
                                <div class="box2">详情</div>
                        </div>
                         <div class="test5">
                                <div class="box1">更多</div>
                                <div class="box2">更多</div>
                        </div>
                </div>

css：

.box2{
        position: absolute;
        transform: perspective(1000px) translateY(-15px) rotateX(90deg);
}
.box1{
        position: absolute;
        transform: perspective(1000px) translateZ(15px);
}
.test5:hover {
        transform: translateY(0px) rotateX(-90deg) translateZ(-0px);
        transition: 0.3s;
}
.test5 div {
        text-align: center;
        width: 60px;
        height: 30px;
        line-height: 30px;
        color: white;
        background-color: #000;
}
.test5 {
        display: inline-block;
        width: 60px;
        transform-style: preserve-3d;
        transition: 0.3s;
        position: relative;
        height: 30px;
}
.test55{
        margin-left: 50px;
}