是通过添加伪元素的方式，比那个移动z轴的好点，没有阴影存在，但是有抖动

    1. <!DOCTYPE html>
    2. <html >
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>GBP</title>
    8.       <style>
    9.       /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
    10.       .purse {
    11.   height: 160px;
    12.   width: 160px;
    13.   position: absolute;
    14.   top: 50%;
    15.   left: 50%;
    16.   margin-top: -80px;
    17.   margin-left: -80px;
    18.   -webkit-perspective: 1000;
    19.   -webkit-box-reflect: below 0 linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.2));
    20.   -webkit-filter: saturate(1.45) hue-rotate(2deg);
    21. }
    22. .coin {
    23.   height: 160px;
    24.   width: 160px;
    25.   position: absolute;
    26.   -webkit-transform-style: preserve-3d;
    27.   -webkit-transform-origin: 50%;
    28.   -webkit-animation: spin 2s infinite;
    29.   -webkit-animation-timing-function: linear;
    30. }
    31. .coin .front,
    32. .coin .back {
    33.   position: absolute;
    34.   height: 160px;
    35.   width: 160px;
    36.   border-radius: 50%;
    37.   background-size: cover;
    38. }
    39. .coin .front {
    40.   -webkit-transform: translateZ(8px);
    41. }
    42. .coin .back {
    43.   -webkit-transform: translateZ(-8px) rotateY(180deg);
    44. }
    45. .coin .side {
    46.   -webkit-transform: translateX(72px);
    47.   -webkit-transform-style: preserve-3d;
    48.   -webkit-backface-visibility: hidden;
    49. }
    50. .coin .side .spoke {
    51.   height: 160px;
    52.   width: 16px;
    53.   position: absolute;
    54.   -webkit-transform-style: preserve-3d;
    55.   -webkit-backface-visibility: hidden;
    56. }
    57. .coin .side .spoke:before,
    58. .coin .side .spoke:after {
    59.   content: '';
    60.   display: block;
    61.   height: 15.68274245px;
    62.   width: 16px;
    63.   position: absolute;
    64.   -webkit-transform: rotateX(84.375deg);
    65.   background: #d8be83;
    66.   background: linear-gradient(to bottom, #e6cf99 0%, #e6cf99 74%, #c2a970 75%, #c2a970 100%);
    67.   background-size: 100% 3.48505388px;
    68. }
    69. .coin .side .spoke:before {
    70.   -webkit-transform-origin: top center;
    71. }
    72. .coin .side .spoke:after {
    73.   bottom: 0;
    74.   -webkit-transform-origin: center bottom;
    75. }
    76. .coin .side .spoke:nth-child(16) {
    77.   -webkit-transform: rotateY(90deg) rotateX(180deg);
    78. }
    79. .coin .side .spoke:nth-child(15) {
    80.   -webkit-transform: rotateY(90deg) rotateX(168.75deg);
    81. }
    82. .coin .side .spoke:nth-child(14) {
    83.   -webkit-transform: rotateY(90deg) rotateX(157.5deg);
    84. }
    85. .coin .side .spoke:nth-child(13) {
    86.   -webkit-transform: rotateY(90deg) rotateX(146.25deg);
    87. }
    88. .coin .side .spoke:nth-child(12) {
    89.   -webkit-transform: rotateY(90deg) rotateX(135deg);
    90. }
    91. .coin .side .spoke:nth-child(11) {
    92.   -webkit-transform: rotateY(90deg) rotateX(123.75deg);
    93. }
    94. .coin .side .spoke:nth-child(10) {
    95.   -webkit-transform: rotateY(90deg) rotateX(112.5deg);
    96. }
    97. .coin .side .spoke:nth-child(9) {
    98.   -webkit-transform: rotateY(90deg) rotateX(101.25deg);
    99. }
    100. .coin .side .spoke:nth-child(8) {
    101.   -webkit-transform: rotateY(90deg) rotateX(90deg);
    102. }
    103. .coin .side .spoke:nth-child(7) {
    104.   -webkit-transform: rotateY(90deg) rotateX(78.75deg);
    105. }
    106. .coin .side .spoke:nth-child(6) {
    107.   -webkit-transform: rotateY(90deg) rotateX(67.5deg);
    108. }
    109. .coin .side .spoke:nth-child(5) {
    110.   -webkit-transform: rotateY(90deg) rotateX(56.25deg);
    111. }
    112. .coin .side .spoke:nth-child(4) {
    113.   -webkit-transform: rotateY(90deg) rotateX(45deg);
    114. }
    115. .coin .side .spoke:nth-child(3) {
    116.   -webkit-transform: rotateY(90deg) rotateX(33.75deg);
    117. }
    118. .coin .side .spoke:nth-child(2) {
    119.   -webkit-transform: rotateY(90deg) rotateX(22.5deg);
    120. }
    121. .coin .side .spoke:nth-child(1) {
    122.   -webkit-transform: rotateY(90deg) rotateX(11.25deg);
    123. }
    124. .coin.skeleton .front,
    125. .coin.skeleton .back {
    126.   display: none;
    127. }
    128. .coin.skeleton .side,
    129. .coin.skeleton .side .spoke,
    130. .coin.skeleton .side .spoke:before,
    131. .coin.skeleton .side .spoke:after {
    132.   -webkit-backface-visibility: visible;
    133. }
    134. .coin.skeleton .side .spoke {
    135.   background: rgba(170, 170, 170, 0.1);
    136. }
    137. .coin.skeleton .side .spoke:before {
    138.   background: rgba(255, 170, 170, 0.2);
    139. }
    140. .coin.skeleton .side .spoke:after {
    141.   background: rgba(204, 204, 255, 0.2);
    142. }
    143. body {
    144.   background-color: #000;
    145.   position: absolute;
    146.   top: 0;
    147.   bottom: 0;
    148.   left: 0;
    149.   right: 0;
    150. }
    151. @-webkit-keyframes spin {
    152.   from {
    153.     -webkit-transform: rotateY(0deg);
    154.   }
    155.   to {
    156.     -webkit-transform: rotateY(360deg);
    157.   }
    158. }
    159. .coin .front {
    160.   background-image: url(http://localhost:63342/workspace/practice/2020-01-02-red_envelopes/3112/images/2.jpg);
    161.   /*background-image: url(../images/money@2x.png);*/
    162. }
    163. .coin .back {
    164.   background-image: url(http://localhost:63342/workspace/practice/2020-01-02-red_envelopes/3112/images/1.jpg);
    165.   /*background-image: url(../images/money@2x.png);*/
    166. }
    168.     </style>
    170. </head>
    172. <body>
    173.   <!-- The Coin -->
    174. <div class="purse">
    175.   <div class="coin">
    176.     <div class="front"></div>
    177.     <div class="back"></div>
    178.     <div class="side">
    179.       <div class="spoke"></div>
    180.       <div class="spoke"></div>
    181.       <div class="spoke"></div>
    182.       <div class="spoke"></div>
    183.       <div class="spoke"></div>
    184.       <div class="spoke"></div>
    185.       <div class="spoke"></div>
    186.       <div class="spoke"></div>
    187.       <div class="spoke"></div>
    188.       <div class="spoke"></div>
    189.       <div class="spoke"></div>
    190.       <div class="spoke"></div>
    191.       <div class="spoke"></div>
    192.       <div class="spoke"></div>
    193.       <div class="spoke"></div>
    194.       <div class="spoke"></div>
    195.     </div>
    196.   </div>
    197. </div>
    198. <div style="margin:20px auto; text-align:center">
    199. <!--<a href="http://www.100sucai.com/"><img src="100sucai.png"/></a>-->
    200. </div>
    202. </body>
    203. </html>