移动端 3D 视图层 加部分交互

<template>
    <div class="wrap">
        <!--<div class="wrap1" :style="wrapStyle">-->
        <div class="show-wrap">
            <div class="tier-1">

            </div>
            <div class="tier-2">
                <div class="app-topbar">
                    <div class="title">title</div>
                </div>
                <!--<button @click="boxVisible=!boxVisible">submit</button>-->
            </div>
            <transition name="fade">
                <div class="tier-3" v-show="boxVisible">
                    masking...
                </div>
            </transition>
            <transition name="down">
                <div class="tier-4" v-if="boxVisible">
                    <div class="box">
                        <div class="title">title</div>
                        <div class="foot">
                            <button @click="boxVisible=false">yes</button>
                            <button @click="boxVisible=false">no</button>
                        </div>
                    </div>
                </div>
            </transition>
        </div>
        <!--</div>-->
        <!--<div class="control">-->
        <!--<input class="range" v-model="rangeV" type="range" value="0">-->
        <!--</div>-->
    </div>
</template>

<script>
   export default {
      name: "HelloWorld",
      data() {
         return {
            rangeV: 0,
            boxVisible: false
         }
      },
      watch: {
         rangeV: function (v) {

         }
      },
      computed: {
         wrapStyle() {
            return {
               transform: `rotateY(${this.rangeV}deg)`
            }
         }
      },
      methods: {
         showBox() {

         }
      },
      mounted() {
         setInterval(() => {
            this.boxVisible = !this.boxVisible;
         }, 3000)
      }
   }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    /*.down-enter-active, .down-leave-active {*/
    /*transition: all .5s;*/
    /*}*/
    /*.down-enter, .down-leave-to !* .down-leave-active below version 2.1.8 *! {*/
    /*opacity: 0.5;*/
    /*width: 0;*/
    /*}*/
    .down-enter, .down-leave-to {
        opacity: 0;
        transform: translateZ(150px) translateY(-100%) !important;;
    }

    .down-enter-active, .down-leave-active {
        transition: all 0.5s !important;
    }

    .down-enter-to, .down-leave {
        opacity: 1;
        transform: translateZ(150px) translateY(0px) !important;
    }
</style>
<style scoped>
    .wrap {
        width: 50%;
        height: 50%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        /*border: 1px solid #000;*/
        transform-style: preserve-3d;
        perspective: 2000px;
        /*transform: rotateX(1deg);*/
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
    }

    .wrap1 {
        perspective: 2000px;
        transform-style: preserve-3d;
    }

    .control {
        width: 100%;
        height: 100%;
        position: absolute;
    }

    .control .range {
        position: absolute;
        bottom: 0;
        z-index: 2;
    }

    .show-wrap {
        text-align: center;
        width: 375px;
        height: 660px;
        border: 1px solid #000;
        transform-style: preserve-3d;
        perspective: 20000px;
        transform: rotateX(26deg) rotateY(31deg) rotateZ(-20deg);
        /*transform: rotateX(40deg) rotateZ(20deg);*/
        /*animation: rotateZ 50s linear infinite;*/
        position: relative;
    }

    @keyframes rotateZ {
        0% {
            transform: rotateX(40deg) rotateZ(0deg)
        }
        50% {
            transform: rotateX(40deg) rotateZ(180deg)
        }
        100% {
            transform: rotateX(40deg) rotateZ(360deg)
        }
    }

    [class^="tier-"] {
        position: absolute;
        width: 100%;
        height: 100%;
        /*box-shadow: 0 0 5px #000;*/
    }

    .tier-1 {
        transform: translateZ(0px);
        background: #b1c4ee;
    }

    .tier-2 {
        transform: translateZ(50px);
        background: rgba(255, 255, 255, 0.65);
        box-shadow: 0 0 10px #000;
    }

    .tier-2 .app-topbar {
        background: #37a9ec;
        color: #fff;
        height: 40px;
        line-height: 40px;
    }

    .title {
        background: #37a9ec;
        color: #fff;
    }

    .tier-3 {
        transform: translateZ(100px);
        background: rgba(0, 0, 0, 0.49);
        display: flex;
        justify-content: center;
        align-items: baseline;
        color: #fff;
    }

    .tier-4 {
        transform: translateZ(150px);
    }

    .tier-4 .box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60%;
        height: 20%;
        background: #fff;
        box-shadow: 0 0 10px #000;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .tier-4 .box .foot {
        display: flex;
    }

    .tier-4 .box .foot button {
        flex: 1
    }
</style>