论坛 › 马黑黑教程专版 › 绘制CSS3d球形

马黑黑 发表于 2022-4-8 18:48

绘制CSS3d球形

本帖最后由 马黑黑 于 2022-4-8 18:55 编辑

用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>



嗯，是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>

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



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

马黑黑 发表于 2022-4-8 18:50

<style>
.circle {
      margin: 50px auto;
      width: 300px;
      height: 300px;
      transform-style: preserve-3d;
      position: relative;
}
.circle div {
      width: 100%;
      height: 100%;
      border: 1px solid olive;
      border-radius: 50%;
      position: absolute;
}
.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);}
</style>

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

马黑黑 发表于 2022-4-8 18:50

完整代码：

<style>
.circle {
      margin: 50px auto;
      width: 300px;
      height: 300px;
      transform-style: preserve-3d;
      position: relative;
}
.circle div {
      width: 100%;
      height: 100%;
      border: 1px solid olive;
      border-radius: 50%;
      position: absolute;
}
.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);}
</style>

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

红影 发表于 2022-4-8 19:57

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

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

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

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

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

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

本帖最后由 马黑黑 于 2022-4-8 20:32 编辑

红影 发表于 2022-4-8 19:57
漂亮。既然是立体的，感觉转动角度后应该不止这几条吧，重叠了？
大哥圆环是正圆，它之内有5给被压扁的兄弟圆环，你去数一数。可能你数不够，那是因为你用平面的思维。酱紫，你就数“瓜瓣”，是不是5片？这就对了，人家是立体的。

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

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

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

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

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

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

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

红影 发表于 2022-4-9 07:51

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

是的，看到转动图已经看出来了{:4_173:}

红影 发表于 2022-4-9 07:54

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

是啊，知道的呢，试过了{:4_204:}

红影 发表于 2022-4-9 07:56

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

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

马黑黑 发表于 2022-4-9 08:25

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

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

马黑黑 发表于 2022-4-9 08:26

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

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

红影 发表于 2022-4-9 10:35

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

嗯嗯，现在弄清楚了。谢谢{:4_204:}

红影 发表于 2022-4-9 10:38

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

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

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

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

可以玩玩

红影 发表于 2022-4-9 21:19

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

是的，看到你做的了，在帖子里还挺漂亮的呢{:4_204:}

马黑黑 发表于 2022-4-10 09:07

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

在帖子里面很突兀的{:5_117:}

红影 发表于 2022-4-10 15:04

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

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

查看完整版本: 绘制CSS3d球形