transfrom-style案例之公告牌 - 图1

    实现：

    1.     <style>
    2.         body {
    3.             background-color: rgb(223, 215, 215);
    4.         }
    6.         .ft {
    7.             height: 100px;
    8.             margin: 50px auto;
    9.         }
    11.         .one {
    12.             position: relative;
    13.             transform-style: preserve-3d;
    14.             transition: all 0.3s;
    15.             width: 150px;
    16.             height: 100px;
    17.         }
    19.         .one:hover {
    20.             transform: rotateX(90deg);
    22.         }
    24.         .up,
    25.         .dw {
    26.             position: absolute;
    27.             top: 0;
    28.             left: 0;
    29.             width: 100%;
    30.             height: 100%;
    31.         }
    33.         .up {
    34.             background-color: khaki;
    35.             z-index: 1;
    36.             transform: translateZ(50px);
    37.         }
    39.         .dw {
    40.             background-color: rgb(29, 163, 207);
    41.             /* transform复写时，必须要将移动放最前面 */
    42.             transform: translateY(50px) rotateX(-90deg);
    44.         }
    45.     </style>
    46. </head>
    48. <body>
    49.     <div class="ft">
    50.         <div class="one">
    51.             <div class="up"></div>
    52.             <div class="dw"></div>
    53.         </div>
    54.     </div>