1. <!DOCTYPE html>
    2. <html>
    4. <head lang="en">
    5.     <meta charset="UTF-8">
    6.     <title>椭圆</title>
    7.     <style>
    8.         * {
    9.             margin: 0;
    10.             padding: 0;
    11.         }
    13.         .wrapper {
    14.             width: 400px;
    15.             height: 400px;
    16.             margin: 200px;
    17.             perspective: 800px;
    18.             perspective-origin: 50% 50%;
    19.             position: relative;
    20.         }
    22.         .stage {
    23.             transform-style: preserve-3d;
    24.             position: absolute;
    25.             top: 50%;
    26.             left: 50%;
    27.             transform: translate3d(-50%, -50%, 0);
    28.         }
    30.         .ball {
    31.             width: 200px;
    32.             height: 200px;
    33.             border-radius: 50%;
    34.             background-color: #ccc;
    35.             position: absolute;
    36.             top: 50%;
    37.             left: 50%;
    38.             transform: translate3d(-50%, -50%, 0);
    39.             box-shadow: 0px 55px 45px -38px rgba(0, 0, 0, .3);
    40.         }
    42.         .ball::before {
    43.             content: "";
    44.             position: absolute;
    45.             top: 1%;
    46.             left: 5%;
    47.             width: 90%;
    48.             height: 90%;
    49.             border-radius: 50%;
    50.             background: -webkit-radial-gradient(50% 0px, circle, #ffffff, rgba(255, 255, 255, 0) 58%);
    51.             z-index: 2;
    52.         }
    54.         .text {
    55.             width: 100px;
    56.             height: 50px;
    57.             line-height: 50px;
    58.             text-align: center;
    59.             white-space: nowrap;
    60.             animation: rotate 5s linear infinite;
    61.             backface-visibility: hidden;
    62.         }
    64.         @keyframes rotate {
    65.             from {
    66.                 transform: rotateY(0deg) translateZ(100px);
    67.             }
    69.             to {
    70.                 transform: rotateY(360deg) translateZ(100px);
    71.             }
    72.         }
    73.     </style>
    74. </head>
    76. <body>
    77.     <div class="wrapper">
    78.         <div class="ball"></div>
    79.         <div class="stage">
    80.             <div class="text">
    81.                 这里是文字
    82.             </div>
    83.         </div>
    84.     </div>
    87. </body>
    89. </html>