绘制CSS3d球形

马黑黑

用CSS绘制3d球形

我们预设的3d球形由几个圆环组成。所以，我们先定义一个CSS类选择器，用以归拢若干个圆环子元素:

.circle {
        margin: 50px auto;
        width: 300px;
        height: 300px;
        transform-style: preserve-3d;
        position: relative;
}

.circle选择器已经定义了transform-style为preserve-3d样式，这是必须的，3d渲染效果需要它。接下来，设置.circle之下的子元素统一样式：

.circle div {
        width: 100%;
        height: 100%;
        border: 1px solid olive;
        border-radius: 50%;
        position: absolute;
}

非常简单：宽高就父元素尺寸，边框及颜色，边框为圆形，绝对定位。

现在，如下的HTML代码所能构建的效果是我们所熟悉的样子：

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

b1

嗯，是2d的效果。这是因为我们没有转动它、它的兄弟姐妹尚未加入。第一个圆环占满父框，是个正圆，它没有转动，但我们也要给它定义转动的名分。我们用伪标签nth-child来完成这个转动设定，我们用到的函数是rotateY，沿Y轴的旋转指令：

.circle div:nth-child(1){ transform: rotateY(0deg); }

现在看上去应该没有什么变化，但当我们一口气加入其余的圆环子元素，可能情形就不一样了。让我们再加五个伪标签，每一个圆环都累进加30deg的转动角度，使得它们均匀分布于它们大哥 circle div:nth-child(1) 的怀抱内：

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

这时的HTML代码对应修改为：

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

效果应该有所不同了，看上去挺像那么一回事：

b2

至此，圆形3d球体画好了。当然，作为3d的演示，我们还应给它加入景深，这需要给 .circle 选择器套个父盒子，令父盒子拥有 perspective 属性，其值可设为上千的像素，如 perspective: 2000px。还需要加个动画让它旋转，用 rotateY，如果想让它倾斜一点点，则加上rotateZ，这就差不多了。

马黑黑

马黑黑

完整代码：

1. <style>
   
2. .circle {
   
3.         margin: 50px auto;
   
4.         width: 300px;
   
5.         height: 300px;
   
6.         transform-style: preserve-3d;
   
7.         position: relative;
   
8. }
   
9. .circle div {
   
10.         width: 100%;
    
11.         height: 100%;
    
12.         border: 1px solid olive;
    
13.         border-radius: 50%;
    
14.         position: absolute;
    
15. }
    
16. .circle div:nth-child(1){ transform: rotateY(0deg);}
    
17. .circle div:nth-child(2) { transform:rotateY(30deg);}
    
18. .circle div:nth-child(3) { transform:rotateY(60deg);}
    
19. .circle div:nth-child(4) { transform:rotateY(90deg);}
    
20. .circle div:nth-child(5) { transform:rotateY(120deg);}
    
21. .circle div:nth-child(6) { transform:rotateY(150deg);}
    
22. </style>
    
23. 
    
24. <div class="circle">
    
25.         <div></div>
    
26.         <div></div>
    
27.         <div></div>
    
28.         <div></div>
    
29.         <div></div>
    
30.         <div></div>
    
31. </div>

复制代码

红影

漂亮。既然是立体的，感觉转动角度后应该不止这几条吧，重叠了？

红影

本地试了一下，果然如此，有几条的前后重叠了。
对于沙发的图形，只需要0度 30度 60度 就能得到一样的效果。
当然这个是平视图，若是转动起来，应该要各间隔的角度都写出来吧，否则会有空档。

红影

90度我以为应该会得到一条竖线。结果什么都没有。单独去测试了一下90度，也是什么都看不到。
也许因为线条的1px只是针对平面的吧，z向没有。深度方向需要另外设置？

马黑黑

红影 发表于 2022-4-8 19:57
漂亮。既然是立体的，感觉转动角度后应该不止这几条吧，重叠了？

大哥圆环是正圆，它之内有5给被压扁的兄弟圆环，你去数一数。可能你数不够，那是因为你用平面的思维。酱紫，你就数“瓜瓣”，是不是5片？这就对了，人家是立体的。

所谓的重叠，就因为立体。

马黑黑

红影 发表于 2022-4-8 20:06
本地试了一下，果然如此，有几条的前后重叠了。
对于沙发的图形，只需要0度 30度 60度 就能得到一样的效果 ...

平面与立体的思维是有区别的。我这里设计30度的步进，主要还是为了将来的扩展，就是旋转。我再队长的地盘发了个更为完整的演示。

马黑黑

红影 发表于 2022-4-8 20:10
90度我以为应该会得到一条竖线。结果什么都没有。单独去测试了一下90度，也是什么都看不到。
也许因为线条 ...

在3d世界，90deg的圆环是圆环正面与x轴垂直，屏幕的z方向里的你只看到小于一像素的东东。为什么会小于一个像素？这是2d演绎3d的结果。这也可以解释旋转过程中球体子圆环有虚线的情形。

红影

马黑黑 发表于 2022-4-8 20:26
大哥圆环是正圆，它之内有5给被压扁的兄弟圆环，你去数一数。可能你数不够，那是因为你用平面的思维。酱 ...

是的，看到转动图已经看出来了

红影

马黑黑 发表于 2022-4-8 20:31
平面与立体的思维是有区别的。我这里设计30度的步进，主要还是为了将来的扩展，就是旋转。我再队长的地盘 ...

是啊，知道的呢，试过了

红影

马黑黑 发表于 2022-4-8 20:36
在3d世界，90deg的圆环是圆环正面与x轴垂直，屏幕的z方向里的你只看到小于一像素的东东。为什么会小于一 ...

嗯嗯，知道了，也就是设置的1像素只是为2D设置的，不包含3D的一维，可以这样理解的吧。
谢谢黑黑的耐心解答，我这里总有十万个为什么，黑黑却不厌其烦

马黑黑

红影 发表于 2022-4-9 07:56
嗯嗯，知道了，也就是设置的1像素只是为2D设置的，不包含3D的一维，可以这样理解的吧。
谢谢黑黑的耐心 ...

哦，这样理解也是可以的吧

马黑黑

红影 发表于 2022-4-9 07:51
是的，看到转动图已经看出来了

嗯，慢慢体会，会有诸多理解

红影

马黑黑 发表于 2022-4-9 08:25
哦，这样理解也是可以的吧

嗯嗯，现在弄清楚了。谢谢

红影

马黑黑 发表于 2022-4-9 08:26
嗯，慢慢体会，会有诸多理解

这个又漂亮又好玩，真不错。

马黑黑

红影 发表于 2022-4-9 10:38
这个又漂亮又好玩，真不错。

可以玩玩

红影

马黑黑 发表于 2022-4-9 12:08
可以玩玩

是的，看到你做的了，在帖子里还挺漂亮的呢

马黑黑

红影 发表于 2022-4-9 21:19
是的，看到你做的了，在帖子里还挺漂亮的呢

在帖子里面很突兀的

红影

马黑黑 发表于 2022-4-10 09:07
在帖子里面很突兀的

还行，关键是和背景搭配，搭配得好，也很点睛的。