純CSS3卡片翻面效果

    

建立一個#container來當3D空間，建立一個#card來包住一個3D物件，#card包含兩個元素(分別代表正面和背面)： 

  <div id="container">

        <div id="card">

            <div id="front">1</div>

            <div id="back">2</div>

        </div>

    </div>

建立CSS3(為了減少語法所以只預設使用-webkit-)：

    <style>

        #container {

            width: 200px;

            height: 260px;

            position: relative;

            /* 定義3D視覺的角度，讓底下子元素使用3D特效時能夠完整顯示。 */

            -webkit-perspective: 800px;

            /* 建立外寬，方便用來觀察卡片卡片旋轉的角度，用來方便調整perspective。 */

            border: 1px dotted gray;

        }

        #card {

            width: 100%;

            height: 100%;

            position: absolute;

            /* 指定動畫效果。 */

            -webkit-animation: flipping 2s infinite linear;

            /* 設置内嵌的元素在 3D 空間如何呈現。flat：所有子元素在 2D 平面呈現(預設值)。preserve-3d：保留3D空間。 */

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

        }

            #card div {

                width: 100%;

                height: 100%;

                position: absolute;

                /* 不要顯示背面，因為兩張卡片要重疊在一起，背面要顯示另一張卡的正面。

                   如果沒有設置"transform-style: preserve-3d"，則這個屬性就會無效。 */

                -webkit-backface-visibility: hidden;

            }

        #front {

            background: red;

        }

        #back {

            background: blue;

            /* 另一張卡先轉成背面 */

            -webkit-transform: rotateY( 180deg );

        }

        @-webkit-keyframes flipping {

            from {

                -webkit-transform: rotateY( 0deg );

            }

            to {

                -webkit-transform: rotateY( 360deg );

            }

        }

    </style>

觀看demo

翻轉的中心點預設在中間

-webkit-transform-origin:center center;

-webkit-transform-origin:50% 50%;

如果想要類似開門或是翻書效果，則可在#card加入

-webkit-transform-origin:right center;