论坛 › 欢乐水吧 › 3d球体送小九

马黑黑 发表于 2022-4-8 19:08

3d球体送小九

<style>
.stage{
        margin: auto;
        position: relative;
        width: 760px;
        height: 560px;
        background: #000;
        perspective: 3000px;
        perspective-origin: 50% 50%;
}
.circle {
        position: absolute;
        left: calc(50% - 150px);
        top: calc(50% - 150px);
        width: 300px;
        height: 300px;
        transform-style: preserve-3d;
        animation: rot 10s linear infinite;
}
.circle div {
        position: absolute;
        width: 100%;
        height: 100%;
        border: 1px solid olive;
        border-radius: 50%;
}
.circle div:nth-child(1){ transform:rotateY(0deg);}
.circle div:nth-child(2){ transform:rotateY(30deg);}
.circle div:nth-child(3){ transform:rotateY(60deg);}
.circle div:nth-child(4){ transform:rotateY(90deg);}
.circle div:nth-child(5){ transform:rotateY(120deg);}
.circle div:nth-child(6){ transform:rotateY(150deg);}
@keyframes rot{
        0%{ transform: rotateZ(30deg) rotateY(0turn);}
        100%{ transform: rotateZ(30deg) rotateY(1turn);}
}
</style>

<div class="stage">
        <div class="circle">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
        </div>
</div>

马黑黑 发表于 2022-4-8 19:08

完整代码：

<style>
.stage{
        margin: auto;
        position: relative;
        width: 760px;
        height: 560px;
        background: #000;
        perspective: 3000px;
        perspective-origin: 50% 50%;
}
.circle {
        position: absolute;
        left: calc(50% - 150px);
        top: calc(50% - 150px);
        width: 300px;
        height: 300px;
        transform-style: preserve-3d;
        animation: rot 10s linear infinite;
}
.circle div {
        position: absolute;
        width: 100%;
        height: 100%;
        border: 1px solid olive;
        border-radius: 50%;
}
.circle div:nth-child(1){ transform:rotateY(0deg);}
.circle div:nth-child(2){ transform:rotateY(30deg);}
.circle div:nth-child(3){ transform:rotateY(60deg);}
.circle div:nth-child(4){ transform:rotateY(90deg);}
.circle div:nth-child(5){ transform:rotateY(120deg);}
.circle div:nth-child(6){ transform:rotateY(150deg);}
@keyframes rot{
        0%{ transform: rotateZ(30deg) rotateY(0turn);}
        100%{ transform: rotateZ(30deg) rotateY(1turn);}
}
</style>

<div class="stage">
        <div class="circle">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
        </div>
</div>

马黑黑 发表于 2022-4-8 19:09

具体教程与解释请移步：

https://www.huachaowang.com/forum.php?mod=viewthread&tid=58509

小九 发表于 2022-4-8 19:25

好漂亮啊，谢谢黑黑{:4_187:}

绿叶清舟 发表于 2022-4-8 19:30

这个球漂亮{:4_199:}

加林森 发表于 2022-4-8 19:30

老黑又制作出来一个滚动的园球啊。厉害。{:4_199:}

小九 发表于 2022-4-8 19:35

但是我不知道该如何组合 代码， 如果要放图片的话，是不是还需要加图片代码和音乐代码进去

马黑黑 发表于 2022-4-8 20:26

小九 发表于 2022-4-8 19:35
但是我不知道该如何组合 代码， 如果要放图片的话，是不是还需要加图片代码和音乐代码进去

这个需要点功夫，你先把礼物收了

马黑黑 发表于 2022-4-8 20:28

小九 发表于 2022-4-8 19:25
好漂亮啊，谢谢黑黑

不客气哈

马黑黑 发表于 2022-4-8 20:28

绿叶清舟 发表于 2022-4-8 19:30
这个球漂亮

又说球！东篱会笑话我的

马黑黑 发表于 2022-4-8 20:29

加林森 发表于 2022-4-8 19:30
老黑又制作出来一个滚动的园球啊。厉害。

还不错吧

红影 发表于 2022-4-8 20:47

马黑黑 发表于 2022-4-8 20:28
又说球！东篱会笑话我的

看到这句，笑喷{:4_170:}

红影 发表于 2022-4-8 20:48

果然，在3d情况下，只需去分180度就够了，剩下的半圈在反面自动存在了{:4_204:}

加林森 发表于 2022-4-8 20:48

马黑黑 发表于 2022-4-8 20:29
还不错吧

挺好的，漂亮。

红影 发表于 2022-4-8 20:52

在有景深的情况下，色彩竟变得这么漂亮，是不是所有的色彩放进去都会很美？{:4_204:}

红影 发表于 2022-4-8 20:56

在本地测试了一下，把border-radius: 50%;变成30%，也挺好看，像灯笼{:4_173:}

马黑黑 发表于 2022-4-8 21:05

红影 发表于 2022-4-8 20:56
在本地测试了一下，把border-radius: 50%;变成30%，也挺好看，像灯笼

嗯，加工一下，会有不同的效果

马黑黑 发表于 2022-4-8 21:05

加林森 发表于 2022-4-8 20:48
挺好的，漂亮。

嗯，谢谢

马黑黑 发表于 2022-4-8 21:06

红影 发表于 2022-4-8 20:47
看到这句，笑喷

{:4_203:}

马黑黑 发表于 2022-4-8 21:06

红影 发表于 2022-4-8 20:52
在有景深的情况下，色彩竟变得这么漂亮，是不是所有的色彩放进去都会很美？

应该是

查看完整版本: 3d球体送小九