JSFiddle - React, Tailwind, and code Playground

by ruisoftware

HTML

<button id="show">show</button>

<div id="stage">
    <ul>
        <li>footer1</li>
        <li>footer2</li>
        <li>footer3</li>
    </ul>
    <p id="msg">Stop, I'm getting dizzy!</p>
</div>

CSS

@-webkit-keyframes footermessage {
    from { -webkit-transform: rotateX(0deg); }
    to   { -webkit-transform: rotateX(-90deg); }
}
@-webkit-keyframes footer {
    from { -webkit-transform: rotateX(90deg); }
    to   { -webkit-transform: rotateX(0deg); }
}


#stage {
    font-size: 3em;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-perspective: 1000px;
}

#stage ul {
    background-color: rgba(200, 255, 200, 0.5);
    height: 200px;
    -webkit-transform-origin: 0 200px;
    -webkit-transform: rotateX(90deg);
    
    /*
    -webkit-animation-name: footer;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 2s;
    -webkit-transform-style: preserve-3d;
    */
}

#msg {
    background: rgba(0,0,0,0.5);
    text-align: center;
    color: white; 
    -webkit-transform-origin: 0 0;
    -webkit-transform: rotateX(0deg);
    
    /*
    -webkit-animation-name: footermessage;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 2s;
    -webkit-transform-style: preserve-3d;
    */
}

JavaScript

var msgHeight = $("#msg").height();
//$("#stage").height(msgHeight);
  
$("button#show").click(function () {
    $({n: 0}).animate({n: -90}, {
    duration: 3000,
    step: function(now, fx) {
        $("#msg").css('-webkit-transform', 'rotateX(' + now + 'deg)');
        $("#stage ul").css('-webkit-transform', 'rotateX(' + (90 + now) + 'deg)');
        $("#stage").height(msgHeight);
    }
});      
});