CSS3 3D 球体自转特效

最新推荐文章于 2024-07-15 16:36:52 发布

这家伙不愿透露姓名

最新推荐文章于 2024-07-15 16:36:52 发布

阅读量1.6k

点赞数 3

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/A4465643/article/details/108520770

版权

css3 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

CSS3 3D 球体自转特效

transform-style: preserve-3d;设置父级元素，它的子级元素具有3d效果,再设置子元素沿Y 轴的 3D 旋转。
[注：线条看个人喜欢适当减少]

在这里插入图片描述
html代码如下

<div class="box">
        <div class="star">
            <div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
                <div class="starline"></div>
                <div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
                <div class="starline"></div>
                <div class="starline"></div>
        </div>
    </div>

CSS代码如下：

html,
body{
    height: 100%;
    padding: 0;
    margin: 0;
    background:black;
    perspective: 1000px;
    overflow: hidden;
    background-size: 100% auto ;
}
.box{
    transform-style: preserve-3d;
    height: 100%;
    transform: rotateX(70deg) rotateY(-20deg);
}
.star{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    /*border: 1px solid #fff;*/
    animation: starrotate 10s linear;
    animation-iteration-count: infinite;
}
.starline{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    border: 1px solid #FFD700;
    border-radius: 50%;
}
.starline:nth-child(1){
    transform: rotateY(10deg);
}
.starline:nth-child(2){
    transform: rotateY(20deg);
}
.starline:nth-child(3){
    transform: rotateY(30deg);
}
.starline:nth-child(4){
    transform: rotateY(40deg);
}
.starline:nth-child(5){
    transform: rotateY(500deg);
}
.starline:nth-child(6){
    transform: rotateY(60deg);
}
.starline:nth-child(7){
    transform: rotateY(70deg);
}
.starline:nth-child(8){
    transform: rotateY(80deg);
}
.starline:nth-child(9){
    transform: rotateY(90deg);
}
.starline:nth-child(10){
    transform: rotateY(100deg);
}
.starline:nth-child(11){
    transform: rotateY(110deg);
}
.starline:nth-child(12){
    transform: rotateY(120deg);
}
.starline:nth-child(13){
    transform: rotateY(130deg);
}
.starline:nth-child(14){
    transform: rotateY(140deg);
}
.starline:nth-child(15){
    transform: rotateY(150deg);
}
.starline:nth-child(16){
    transform: rotateY(160deg);
}
.starline:nth-child(17){
    transform: rotateY(170deg);
}
.starline:nth-child(18){
    transform: rotateY(180deg);
}
.starline:nth-child(19){
    transform: rotateX(10deg);
}
.starline:nth-child(20){
    transform: rotateX(20deg);
}
.starline:nth-child(21){
    transform: rotateX(30deg);
}
.starline:nth-child(22){
    transform: rotateX(40deg);
}
.starline:nth-child(23){
    transform: rotateX(50deg);
}
.starline:nth-child(24){
    transform: rotateX(60deg);
}
.starline:nth-child(25){
    transform: rotateX(70deg);
}
.starline:nth-child(26){
    transform: rotateX(80deg);
}
.starline:nth-child(27){
    transform: rotateX(90deg);
}
.starline:nth-child(28){
    transform: rotateX(100deg);
}
.starline:nth-child(29){
    transform: rotateX(110deg);
}
.starline:nth-child(30){
    transform: rotateX(120deg);
}
.starline:nth-child(31){
    transform: rotateX(130deg);
}
.starline:nth-child(32){
    transform: rotateX(140deg);
}
.starline:nth-child(33){
    transform: rotateX(150deg);
}
.starline:nth-child(34){
    transform: rotateX(160deg);
}
.starline:nth-child(35){
    transform: rotateX(170deg);
}
.starline:nth-child(36){
    transform: rotateX(180deg);
}
@keyframes starrotate{
    from{transform: rotateZ(0deg);}
    to{transform: rotateZ(360deg);}
}