css 动画翻转<meta name="viewport" content="width=device-width, i

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css3-3D</title>
    <style>
        #my {

            perspective: 800;
            -webkit-perspective: 800;
            /* Safari and Chrome */
            perspective-origin: 50% 50%;

            -webkit-perspective-origin: 50% 50%;
            /* Safari 和 Chrome */
            overflow: hidden;
        }

        #page {
            width: 400px;
            height: 400px;
            margin: 0 auto;
            /* transform: rotateY(60deg); */
            transform-style: preserve-3d;
            /* -webkit-transform: rotateY(60deg); */
            /* Safari 和 Chrome */
            -webkit-transform-style: preserve-3d;
            position: relative;
        }

        .number {
            width: 360px;
            height: 360px;
            padding: 20px;
            color: #ffffff;
            background-color: blue;
            font-weight: block;
            font-size: 360px;
            line-height: 360px;
            text-align: center;

        }

        #one {

            transform-origin: bottom;
            -ms-transform-origin: bottom;
            /* IE 9 */
            -webkit-transform-origin: bottom;
            /* Safari 和 Chrome */
            -moz-transform-origin: bottom;
            /* Firefox */
            -o-transform-origin: bottom;
            /* Opera */
            transition: -webkit-transforms 2s linear;
            -moz-transition: -webkit-transform 2s linear;
            /* Firefox 4 */
            -webkit-transition: -webkit-transform 2s linear;
            /* Safari 和 Chrome */
            -o-transition: -webkit-transform 2s linear;
            /* Opera */
            -webkit-transform-origin: bottom;
            -webkit-transition: -webkit-transfrom 2s linear;
        }

        #one1,
        #one2,
        #one3,
        #one4 {
            transform-origin: bottom;
            -ms-transform-origin: bottom;
            /* IE 9 */
            -webkit-transform-origin: bottom;
            /* Safari 和 Chrome */
            -moz-transform-origin: bottom;
            /* Firefox */
            -o-transform-origin: bottom;
            /* Opera */
            transition: -webkit-transforms 2s linear;
            -moz-transition: -webkit-transform 2s linear;
            /* Firefox 4 */
            -webkit-transition: -webkit-transform 2s linear;
            /* Safari 和 Chrome */
            -o-transition: -webkit-transform 2s linear;
            /* Opera */
            -webkit-transform: rotateX(90deg);
            transform: rotateX(90deg);
            -ms-transform: rotateX(90deg);
            /* IE 9 */
            -webkit-transform: rotateX(90deg);
            /* Safari and Chrome */

        }

        #op {
            text-align: center;
            margin: 10 auto;
        }
    </style>
</head>

<body>
    <div id="my">
        <div id="page">
            <div id="one0" class="number">1</div>
            <div id="one1" class="number">2</div>
            <div id="one2" class="number">3</div>
            <div id="one3" class="number">4</div>
            <div id="one4" class="number">5</div>
        </div>
    </div>
    <div id="op">
        <a href="javascript: next()">next</a> &npar; <a href="javascript:prev()">pervious</a>
    </div>

    <script type="text/javascript">
        var onaIndex = 0
        function next() {
            if (onaIndex == 4)
                return;
            var curPage = document.getElementById('one' + onaIndex)
            curPage.style.webkitTransform = 'rotateX(-90deg)'
            onaIndex++
            console.log(onaIndex)
            var curPageTwo = document.getElementById('one' + onaIndex)
            curPageTwo.style.webkitTransform = 'rotateX(0deg)'
            curPageTwo.style.marginTop = '-100%'
        }
        function prev() {
            if (onaIndex == 0)
                return;
            var curPage = document.getElementById('one' + onaIndex)
            curPage.style.webkitTransform = 'rotateX(90deg)'
            onaIndex--
            console.log(onaIndex)
            var curPageTwo = document.getElementById('one' + onaIndex)
            curPageTwo.style.webkitTransform = 'rotateX(0deg)'
            curPage.style.webkitTransform = '2s,linear'
        }
    </script>

</body>

</html>