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);
}
}
其中如果有什么不对的,或者更简更好的方法,请大家多多指出,谢谢!