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

来源：互联网发布：爱的算法 pdf 编辑：程序博客网时间：2024/05/29 04:49

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);        }    }

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

0 0