前言：尽管现在不是所有浏览器都支持（edge、ie不支持），但相信总有一天会支持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,shrink-to-fit=no" />
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #sceen{
            position:absolute;
            width:600px;
            height:40px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            perspective:1000px;
        }
        #wrap{
            position:absolute;
            width:100%;
            height:100%;
            transform-style:preserve-3d;
            transform-origin: 0 0 0;
            transition: transform 1s;
        }
        #a, #b{
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            transform-style:preserve-3d;
            /*火狐必须加上*/
            -moz-backface-visibility: hidden;
        }
        #a{
            background-color: #7eccca;
            z-index: 2;
        }
        #b{
            background-color:#FFFFCC;
            transform: rotateX(180deg);
            -ms-transform: rotateX(180deg);
        }
    </style>
</head>
<body>
<div id="sceen">
    <div id="wrap">
        <div id="a">A</div>
        <div id="b">B</div>
    </div>
</div>
<button id="bt">变形</button>
<button id="bt2">还原</button>
<script>
    var bt = document.getElementById('bt');
    var bt2 = document.getElementById('bt2');
    var wrap = document.getElementById('wrap');

    bt.onclick = function () {
        wrap.style.transform = 'rotateX(180deg)';
    };
    bt2.onclick = function () {
        wrap.style.transform = 'rotateX(0deg)';
    };
</script>
</body>
</html>