transform-style ~ animation (css3星环运动)

transform--style属性指定嵌套元素是怎样在三维空间中呈现。

值	描述
flat	子元素将不保留其 3D 位置。
preserve-3d	子元素将保留其 3D 位置。

  然后我就自己用这个属性写咯一个比较炫的星环动画。

html代码：

    <div class="box">
        <div class="small"></div>
    </div>
    <div class="box">
        <div class="small"></div>
    </div>
    <div class="box">
        <div class="small"></div>
    </div>
    <div class="box">
        <div class="small"></div>
    </div>

css代码：

html, body {height: 100%;}
    body {background: -webkit-radial-gradient(center ellipse,  #34679a 0%,#214163 47%,#0d1926 100%);
        background: radial-gradient(ellipse at center,  #34679a 0%,#214163 47%,#0d1926 100%);}
    body > div:first-of-type:after {content: "";position: absolute;height: 40px; width: 40px;background: #fff;border-radius: 50%;
      -webkit-transform: rotateX(-80deg) rotateY(0);
      transform: rotateX(-80deg) rotateY(0);
      box-shadow: 0 0 25px #fff;
      -webkit-animation: nucleus_ 2s infinite linear;
      animation: nucleus_ 2s infinite linear;
      left: 50%;top: 50%;margin-top: -20px;margin-left: -20px;}
    .box{ width: 300px; height: 300px; border-radius: 50%; border:1px solid #fff;margin:40px auto;
        position: absolute; top:40px; left: 40%;
        -webkit-transform:rotateX(68deg) rotateY(56deg);
                transform:rotateX(68deg) rotateY(56deg);
        
        -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d; 
    }
    .small{position: absolute;left: 0; top:0px; width: 300px ; height:300px; border-radius: 50%; 
        -webkit-transform:rotateX(70deg) rotateY(50deg);
                transform:rotateX(70deg) rotateY(50deg);
        -webkit-animation: myanimat 2s infinite linear;
                animation: myanimat 2s infinite linear;
    }
    .box:nth-child(2){
        -webkit-transform:rotateX(74deg) rotateY(137deg);
                transform:rotateX(74deg) rotateY(137deg);
    }
    .box:nth-child(3){
        -webkit-transform:rotateX(79deg) rotateY(183deg);
                transform:rotateX(79deg) rotateY(183deg);
    }
    .small:after {content:" ";position: absolute;left: 0; top:99px; width: 10px ; height:10px; 
        border-radius: 50%; background: #fff000; box-shadow: 0px 2px 11px #fff;
    } 

    @keyframes myanimat{
        from{
            transform:rotate(0deg);
        }
        to{
            transform:rotate(360deg);
        }
    }

其中如果有什么不对的，或者更简更好的方法，请大家多多指出，谢谢！