transfrom-style案例之旋转硬币 - 图1
    实现：

    1.     <style>
    2.         .ft {
    3.             position: relative;
    4.             transform-style: preserve-3d;
    5.             width: 860px;
    6.             height: 860px;
    7.             margin: 50px auto;
    9.             transition: all 0.7s;
    10.         }
    11.         .ft:hover {
    12.             transform: rotateY(180deg);
    13.         }
    14.         .one,
    15.         .two {
    16.             position: absolute;
    17.             top: 0;
    18.             left: 0;
    19.             width: 100%;
    20.             height: 100%;
    21.             border-radius: 50%;
    22.             font-size: 70px;
    23.             font-weight: 700;
    24.             text-align: center;
    25.             background: url(http://pic36.photophoto.cn/20150715/0007020080742327_b.jpg) no-repeat;
    26.            background-position: -79px -93px;
    27.             line-height: 860px;
    28.         }
    30.         .one {
    31.            color: hotpink;
    32.             z-index: 1;
    33.         }
    34.         .two {
    35.             color: rgb(109, 173, 13); 
    36.             transform: rotateY(180deg);
    37.         }
    38.     </style>
    39. </head>
    41. <body>
    42.     <div class="ft">
    43.         <div class="one">郭芷妘</div>
    44.         <div class="two">傅鸿杰</div>
    45.     </div>
    46. </body>