@media screen and (orientation: portrait) {
  /*竖屏 css*/
    @keyframes fadeInOut {
        0% {
            opacity: 0;
            -webkit-transform: scaleX(0) rotate(90deg);
            -ms-transform: scaleX(0) rotate(90deg);
            transform: scaleX(0) rotate(90deg);
        }

        20% {
            opacity: 1;
            -webkit-transform: scaleX(1) rotate(90deg);
            -ms-transform: scaleX(1) rotate(90deg);
            transform: scaleX(1) rotate(90deg);
        }
        80% {
            opacity: 1;
            -webkit-transform: scaleX(1) rotate(90deg);
            -ms-transform: scaleX(1) rotate(90deg);
            transform: scaleX(1) rotate(90deg);

        }

        100% {
            opacity: 0;
            -webkit-transform: scaleX(0) rotate(90deg);
            -ms-transform:scaleX(0) rotate(90deg);
            transform: scaleX(0) rotate(90deg);
        }
    }
.panel{
        max-height: 100vh;
        max-width: 100vw;
        margin:auto;
        display: block;
        position: absolute;
        top:0;
        bottom: 0;
        left: 0;
        right: 0; 
        transform: rotate(90deg);
}


} 
@media screen and (orientation: landscape) {
  /*横屏 css*/
    @keyframes fadeInOut {
        0% {
            opacity: 0;
            -webkit-transform: scaleY(0);
            -ms-transform: scaleY(0);
            transform: scaleY(0);
        }

        20% {
            opacity: 1;
            -webkit-transform: scaleY(1);
            -ms-transform: scaleY(1);
            transform: scaleY(1);
        }
        80% {
            opacity: 1;
            -webkit-transform: scaleY(1);
            -ms-transform: scaleY(1);
            transform: scaleY(1);

        }

        100% {
            opacity: 0;
            -webkit-transform: scaleY(0);
            -ms-transform: scaleY(0);
            transform: scaleY(0);
        }
    }
    .panel{
        max-height: 100vh;
        max-width: 100vw;
        margin:auto;
        display: block;
        position: absolute;
        top:0;
        bottom: 0;
        left: 0;
        right: 0; 
        background-color: white;
    }
}
 .showPanel{
     display: block;
     animation: fadeInOut 5s ease-in-out;
    
 }