CSS圖片翻轉例子

時間 2019-11-11
標籤 css 圖片翻轉例子欄目 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/>javascript
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。