CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Step</title>
    <style>
        @-webkit-keyframes step { 
          0% { background-position:0px -0%; }
          100% { background-position:0px -400%; }
        }
        @keyframes step { 
          0% { background-position:0px -0%; }
          100% { background-position:0px -400%; }
        }
        div { 
          height:35px; width:32px;
          -webkit-animation:step 300ms steps(4) infinite; /* infinite为无限次 */
          animation:step 300ms steps(4) infinite; /* steps( 4 ) 分4步执行 */
          background:url( tsj.png );
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

<!DOCTYPE html>

<head>

<style>

@-webkit-keyframes step {

0% { background-position:0px -0%; }

100% { background-position:0px -400%; }

}

@keyframes step {

0% { background-position:0px -0%; }

100% { background-position:0px -400%; }

}

div {

height:35px; width:32px;

-webkit-animation:step 300ms steps(4) infinite; /* infinite为无限次 */

animation:step 300ms steps(4) infinite; /* steps( 4 ) 分4步执行 */

background:url( tsj.png );

}

</style>

</head>

<body>

</body>

</html>

测试连接参考： http://www.gb […]

两个案例 1、翻页测试连接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D_1</title>
    <style>
        .container {
            overflow: hidden;

            -webkit-perspective: 800;
            -webkit-perspective-origin: 50% 50%;
        }
        .pages {
            overflow: hidden;
            width: 400px;
            height: 400px;
            margin: 0 auto;
            position: relative;

            -webkit-transform-style: preserve-3d;
        }
        .page {
            width: 360px;
            height: 360px;
            padding: 20px;
            background-color: #000;
            color: #fff;
            font-weight: bold;
            font-size: 360px;
            line-height: 360px;
            text-align: center;

            position: absolute;

            -webkit-transform-origin: bottom;
            -webkit-transition: -webkit-transform 1s linear;
        }

        .buttons {
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container" >
        <div class="pages" id="pages">
            <div class="page" id="page1">1</div>
            <div class="page" id="page2">2</div>
            <div class="page" id="page3">3</div>
            <div class="page" id="page4">4</div>
            <div class="page" id="page5">5</div>
            <div class="page" id="page6">6</div>
            <div class="page" id="page7">7</div>
            <div class="page" id="page8">8</div>
            <div class="page" id="page9">9</div>
        </div>
        <div class="buttons">
            <a href="javascript:;" id="prev">prev</a>
            <a href="javascript:;" id="next">next</a>
        </div>
    </div>
    <script>
    ;(function() {
        'use strict';

        function Page( pages, prev, next ) {
            this.pages = pages;
            this.count = this.pages.length;
            this.prev = prev;
            this.next = next;
            this.current = 0;
        }

        Page.prototype.init = function() {
            // 初始化位置
            for( var i = 0; i < this.count; i++ ) {
                if( i == this.current ) {

                } else {
                    this.pages[i].style.webkitTransform = 'rotateX( -90deg )';
                }
            }
            // 初始化上下翻页时间            
            this.next.onclick = this.toNext.call( null, this );
            this.prev.onclick = this.toPrev.call( null, this );
        }

        Page.prototype.toNext = function( obj ) {
            return function() {
                if( obj.current >= obj.count - 1 ) return false;
                obj.pages[obj.current].style.webkitTransform = 'rotateX( 90deg )';
                obj.current++;
                obj.pages[obj.current].style.webkitTransform = 'rotateX( 0deg )';
            }
        }

        Page.prototype.toPrev = function( obj ) {
            return function() {
                if( obj.current <= 0 ) return false;
                obj.pages[obj.current].style.webkitTransform = 'rotateX( -90deg )';
                obj.current--;
                obj.pages[obj.current].style.webkitTransform = 'rotateX( 0deg )';
            }
        }

        var pages_parent = document.getElementById( 'pages' ),
            pages = pages_parent.getElementsByTagName( 'div' ),
            prev = document.getElementById( 'prev' ),
            next =  document.getElementById( 'next' );

        var page = new Page( pages, prev, next );
        page.init();

    })();
    </script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

<!DOCTYPE html>

<head>

<style>

.container {

overflow: hidden;

-webkit-perspective: 800;

-webkit-perspective-origin: 50% 50%;

}

.pages {

overflow: hidden;

width: 400px;

height: 400px;

margin: 0 auto;

position: relative;

-webkit-transform-style: preserve-3d;

}

.page {

width: 360px;

height: 360px;

padding: 20px;

background-color: #000;

color: #fff;

font-weight: bold;

font-size: 360px;

line-height: 360px;

text-align: center;

position: absolute;

-webkit-transform-origin: bottom;

-webkit-transition: -webkit-transform 1s linear;

}

.buttons {

margin: 0 auto;

text-align: center;

}

</style>

</head>

<body>

</div>

</div>

;(function() {

'use strict';

function Page( pages, prev, next ) {

this.pages = pages;

this.count = this.pages.length;

this.prev = prev;

this.next = next;

this.current = 0;

}

Page.prototype.init = function() {

// 初始化位置

for( var i = 0; i < this.count; i++ ) {

if( i == this.current ) {

} else {

this.pages[i].style.webkitTransform = 'rotateX( -90deg )';

}

// 初始化上下翻页时间

this.next.onclick = this.toNext.call( null, this );

this.prev.onclick = this.toPrev.call( null, this );

}

Page.prototype.toNext = function( obj ) {

return function() {

if( obj.current >= obj.count - 1 ) return false;

obj.pages[obj.current].style.webkitTransform = 'rotateX( 90deg )';

obj.current++;

obj.pages[obj.current].style.webkitTransform = 'rotateX( 0deg )';

}

Page.prototype.toPrev = function( obj ) {

return function() {

if( obj.current <= 0 ) return false;

obj.pages[obj.current].style.webkitTransform = 'rotateX( -90deg )';

obj.current--;

obj.pages[obj.current].style.webkitTransform = 'rotateX( 0deg )';

}

var pages_parent = document.getElementById( 'pages' ),

pages = pages_parent.getElementsByTagName( 'div' ),

prev = document.getElementById( 'prev' ),

next = document.getElementById( 'next' );

var page = new Page( pages, prev, next );

page.init();

})();

</script>

</body>

</html>

2、旋转方块 […]

CSS3 —— animation 之 steps方式过渡

CSS3 之 3D 特效（三）

CSS3 之 3D 特效（二）

CSS3 之 3D 特效（一）

绝对定位布局

布局神器 box-sizing