CSS图片翻转例子


 
 
 
 
 
 
 
 
 
dfdfdfdfdf

 

<!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>

来自<http://www.webhek.com/css-flip/>

posted @ 2015-06-10 16:28  Mr.Leo  阅读(1215)  评论(0)  编辑  收藏  举报