<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            /* entire container, keeps perspective */

            /**

             * 【perspective: number|none;】

             *     属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

             *     当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

             */

            .flip-container {perspective: 1000;}

            /* flip the pane when hovered */

            .flip-container:hover .flipper, .flip-container.hover .flipper {transform: rotateY(180deg);}

            .flip-container, .front, .back {width: 320px;height: 480px;}

            /* flip speed goes here */

            /**

             * 【transition: property duration timing-function delay;】

             *     过渡动画 （transition: width 2s;）

             *         transition-property：规定设置过渡效果的 CSS 属性的名称。（width）

             *         transition-duration：规定完成过渡效果需要多少秒或毫秒。（2s）

             *         transition-timing-function：规定速度效果的速度曲线。（ease-in-out）

             *         transition-delay：延迟时间，以秒或毫秒计。

             */

            /**

             * 【transform-style: flat|preserve-3d;】

             * 使被转换的子元素保留其 3D 转换

             *         flat：子元素将不保留其 3D 位置。

             *         preserve-3d：子元素将保留其 3D 位置。

             */

            .flipper {transition: 0.6s;transform-style: preserve-3d;position: relative;}

            /* hide back of pane during swap */

            /**

             * 【backface-visibility: visible|hidden;】

             * 定义当元素背面是否可见。

             */

            .front, .back {backface-visibility: hidden;position: absolute;top: 0;left: 0;}

            /* front pane, placed above back */

            .front {z-index: 2;}

            /* back, initially hidden pane */

            .back {transform: rotateY(180deg);}

        </style>

    </head>

    <body>

        <div class="flip-container" ontouchstart="this.classList.toggle('hover');">

            <div class="flipper">

                <div class="front">

                    <!-- 前面内容 -->

                    <a href="http://www.webhek.com/css-flip/">

                        <img src="http://www.webhek.com/wordpress/wp-content/uploads/2014/03/hacker.jpg"/><br />

                    </a>

                </div>

                <div class="back">

                    <!-- 背面内容 -->

                    <a href="http://www.webhek.com/css-flip/">

                        <img src="http://www.webhek.com/wordpress/wp-content/uploads/2014/03/hack-logo.jpg" style="width: 100%;height: 100%;"/>

                    </a>

                </div>

            </div>

        </div>

        <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

        </script>

    </body>

</html>