红影 发表于 2025-7-9 23:33
它最规整，最奇妙的是球体，里面含有PI 。
用CSS+HTML做真实的球体非常复杂，实现它一是繁琐：你得给它贴上很多个面，二是需要大量的计算：每一个面怎么转动、面和面之间如何衔接。
一般没人愿意去做，通常都是用线型的方式，方便一点。
马黑黑 发表于 2025-7-10 12:41
我试过不影响的
估计不会影响的呢{:4_173:}
马黑黑 发表于 2025-7-10 12:43
用CSS+HTML做真实的球体非常复杂，实现它一是繁琐：你得给它贴上很多个面，二是需要大量的计算：每一个面 ...
哦哦，我只是随口说的，原来它真的很复杂呢{:4_173:}
红影 发表于 2025-7-10 21:11
哦哦，我只是随口说的，原来它真的很复杂呢
目前公开的CSS+HTML真实3D球体实例并不存在，都是线型的球体。
可能可以找到一两个较为接近的案例，其实是采用N多的多面体虚拟的，看着并不真实。
红影 发表于 2025-7-10 21:10
估计不会影响的呢
<style>
#papa {
margin: 20px auto;
width: 100%;
height: 640px;
border: 1px solid gray;
perspective: 1000px;
display: grid;
place-items: center;
position: relative;
}
#papa div {
display: inherit;
place-items: inherit;
}
#box {
--size: 200px;
--bg: darkred;
width: var(--size);
height: var(--size);
left: 200px;
top: 200px;
transform-style: preserve-3d;
transform: rotateX(-45deg) rotateY(0) rotateZ(0);
animation: rot linear 16s infinite;
}
.front { transform: rotateY(0) translateZ(calc(var(--size) / 2)); }
.back { transform: rotateY(180deg) translateZ(calc(var(--size) / 2)); }
.left { transform: rotateY(-90deg) translateZ(calc(var(--size) / 2)); }
.right { transform: rotateY(90deg) translateZ(calc(var(--size) / 2)); }
.top { transform: rotateX(90deg) translateZ(calc(var(--size) / 2)); }
.bottom { transform: rotateX(-90deg) translateZ(calc(var(--size) / 2)); }
.board {
position: absolute;
width: 100%;
height: 100%;
background: var(--bg);
border: 1px solid yellow;
opacity: 0.35;
}
.board::before, .board::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: linear-gradient(45deg, snow, yellow, snow) no-repeat center/4px 100%;
}
.board::after {
transform: rotate(90deg);
}
@keyframes rot {
to { transform: rotateX(-45deg) rotateY(-360deg) rotateZ(0deg); }
}
</style>
<div id="papa">
<div id="box">
<div class="board front"></div>
<div class="board back"></div>
<div class="board left"></div>
<div class="board right"></div>
<div class="board top"></div>
<div class="board bottom"></div>
</div>
</div>
<script type="module">
import { textcanvas } from 'https://638183.freep.cn/638183/3dev/3/textcanvas.js';
const boards = document.querySelectorAll('.board');
const setting = {
font: 'bold 80px "Microsoft Yahei", sans-serif',
fill: true,
fillColor: 'silver',
stroke: true,
strokeColor: 'white',
shadowX: 4,
shadowY: 3,
shadowBlur: 2
};
boards.appendChild(textcanvas('花', setting));
boards.appendChild(textcanvas('论', setting));
boards.appendChild(textcanvas('坛', setting));
boards.appendChild(textcanvas('潮', setting));
</script>
绑线做成对角线也是个好主意
马黑黑 发表于 2025-7-10 22:30
目前公开的CSS+HTML真实3D球体实例并不存在，都是线型的球体。
可能可以找到一两个较为接近的案例，其 ...
球体其实也是无数个圆形的面旋转得到的吧。
马黑黑 发表于 2025-7-10 22:34
#papa {
margin: 20px auto;
width: 100%;
这字体选择还挺好看的呢{:4_187:}
红影 发表于 2025-7-10 23:24
球体其实也是无数个圆形的面旋转得到的吧。
不是。球体就一个面，这和人活一张皮一个道理。
这个面，由无数多个的三角洗贴上去，三角形会做一些三个方向不同弧度的旋转并且完美斜街。
马黑黑 发表于 2025-7-11 21:58
不是。球体就一个面，这和人活一张皮一个道理。
这个面，由无数多个的三角洗贴上去，三角形会做一些三 ...
用无数三角形贴出来的，只能是近似的球面吧。
红影 发表于 2025-7-11 23:11
用无数三角形贴出来的，只能是近似的球面吧。
越多越逼近球体本身。早着，世界不存在完美的球。
马黑黑 发表于 2025-7-11 23:12
越多越逼近球体本身。早着，世界不存在完美的球。
应该是代码界不存在完美的球，现实里还是有的，比如吹泡泡就能能吹出来啊。
红影 发表于 2025-7-11 23:34
应该是代码界不存在完美的球，现实里还是有的，比如吹泡泡就能能吹出来啊。
代码可以做出完美的球，ThreeJS和Unity等已经完美解决这些问题。
而现实生活中的球，都不是百分百完美的：不存在绝对符合数学定义的球体。
马黑黑 发表于 2025-7-12 12:07
代码可以做出完美的球，ThreeJS和Unity等已经完美解决这些问题。
而现实生活中的球，都不是百分百完美 ...
哈哈，那我正好说反了呢{:4_173:}
红影 发表于 2025-7-12 12:27
哈哈，那我正好说反了呢
你经常说反的。不过可以理解：你是学校教育出来的，对现实世界理解的不够深透。
马黑黑 发表于 2025-7-12 12:29
你经常说反的。不过可以理解：你是学校教育出来的，对现实世界理解的不够深透。
这话说的，好像象牙塔里出来的，没有实际生活能力呗。其实，学些的教育目的也是为了解释这个世界的。很多不是学校出来的人很有能力，当更多学说的建立还是学校出来的人弄的。
红影 发表于 2025-7-12 19:40
这话说的，好像象牙塔里出来的，没有实际生活能力呗。其实，学些的教育目的也是为了解释这个世界的。很多 ...
学校有致命问题，尤其是现在的，批量生产，很难培养出拔尖人才。
拔尖人才，通常都讨厌学校，例如年轻时候的比尔盖茨，谷歌的联合创始人，等等，这些人都认为学校不能给他们满意的东东，所以都提前结束了学业。
马黑黑 发表于 2025-7-13 12:47
学校有致命问题，尤其是现在的，批量生产，很难培养出拔尖人才。
拔尖人才，通常都讨厌学校，例如年轻 ...
学校的确有批量生产的问题，但也有很多有真学问的老师，这个不能一概而论的。
红影 发表于 2025-7-13 16:53
学校的确有批量生产的问题，但也有很多有真学问的老师，这个不能一概而论的。
大多数有能力的老师都被排挤：学校只想使用听话的人才，最好没有个性。
马黑黑 发表于 2025-7-13 17:40
大多数有能力的老师都被排挤：学校只想使用听话的人才，最好没有个性。
其实哪都一样，当领导的不管单位怎样，只要自己用的人方便，听自己的。