一段时间以来，我一直在用CSS创造这些3D场景来取乐--通常是在我的直播中。
3D CSS响应式特技飞机!🛩️
它可以做循环和翻滚!😎
响应鼠标的移动 🐭
👉t.co/A1zNmfEzzivia@CodePen pic.twitter.com/87D7LIXLr2
- Jhey 🐻🛠 (Exploring Opportunities✨) (@jh3yy)March 27, 2021
每个演示都是一个机会，可以尝试不同的东西或研究出用CSS做事的方法。我经常做的一件事是接受关于我们应该在流媒体上尝试和制作什么的建议。最近的一个建议是一台可以 "3D "打印的打印机。这就是我所做的
📢 CSS打印店开始营业了!😅
免费打印!😮
输入图片的URL，可以看到它被3D CSS打印机打印出来😁。
👉t.co/UWTDAyUadnvia@CodePen pic.twitter.com/z3q9dJavYv
- Jhey 🐻🛠（探索机会✨）（@jh3yy）2021年4月22日
用CSS制作3D事物
我以前写过关于用CSS制作3D事物的文章。大致内容是，大多数场景都是由立方体组成的。
为了制作一个立方体，我们可以使用CSS变换来定位立方体的边--神奇的属性是transform-style 。将此设置为preserve-3d ，我们就可以在第三维度上变换元素。
* {
transform-style: preserve-3d;
}
一旦你创建了一些这样的场景，你就会开始学习如何加快事情的进展。我喜欢用Pug作为一个HTML预处理器。混合器的能力给了我一种更快地创建立方体的方法。本文中的标记例子使用了Pug。但是对于每个CodePen演示，你可以使用 "查看编译的HTML "选项来查看HTML输出。
mixin cuboid()
.cuboid(class!=attributes.class)
- let s = 0
while s < 6
.cuboid__side
- s++
使用+cuboid()(class="printer__top") ，会产生这样的结果。
<div class="cuboid printer__top">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
然后我有一个固定的CSS块，用来布置立方体。这里的乐趣在于，我们可以利用CSS自定义属性来定义立方体的属性（如上面的视频所示）。
.cuboid {
// Defaults
--width: 15;
--height: 10;
--depth: 4;
height: calc(var(--depth) * 1vmin);
width: calc(var(--width) * 1vmin);
transform-style: preserve-3d;
position: absolute;
font-size: 1rem;
transform: translate3d(0, 0, 5vmin);
}
.cuboid > div:nth-of-type(1) {
height: calc(var(--height) * 1vmin);
width: 100%;
transform-origin: 50% 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc((var(--depth) / 2) * 1vmin));
}
.cuboid > div:nth-of-type(2) {
height: calc(var(--height) * 1vmin);
width: 100%;
transform-origin: 50% 50%;
transform: translate(-50%, -50%) rotateX(-90deg) rotateY(180deg) translate3d(0, 0, calc((var(--depth) / 2) * 1vmin));
position: absolute;
top: 50%;
left: 50%;
}
.cuboid > div:nth-of-type(3) {
height: calc(var(--height) * 1vmin);
width: calc(var(--depth) * 1vmin);
transform: translate(-50%, -50%) rotateX(-90deg) rotateY(90deg) translate3d(0, 0, calc((var(--width) / 2) * 1vmin));
position: absolute;
top: 50%;
left: 50%;
}
.cuboid > div:nth-of-type(4) {
height: calc(var(--height) * 1vmin);
width: calc(var(--depth) * 1vmin);
transform: translate(-50%, -50%) rotateX(-90deg) rotateY(-90deg) translate3d(0, 0, calc((var(--width) / 2) * 1vmin));
position: absolute;
top: 50%;
left: 50%;
}
.cuboid > div:nth-of-type(5) {
height: calc(var(--depth) * 1vmin);
width: calc(var(--width) * 1vmin);
transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * 1vmin));
position: absolute;
top: 50%;
left: 50%;
}
.cuboid > div:nth-of-type(6) {
height: calc(var(--depth) * 1vmin);
width: calc(var(--width) * 1vmin);
transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * -1vmin)) rotateX(180deg);
position: absolute;
top: 50%;
left: 50%;
}
使用自定义属性，我们可以控制立方体的各种特性，等等。
--width: 一个长方体在平面上的宽度--height:长方体在平面上的高度--depth：长方体在平面上的深度--x平面上的X位置--y平面上的Y位置
在我们把长方体放到场景中并旋转它之前，这并不令人印象深刻。我再次使用自定义属性来操作场景，同时我也在做一些工作。Dat.GUI在这里派上了大用场。
请看CodePen上SitePoint (@SitePoint) 的Pen
CSS 3D Sandbox 🏖。
如果你看了这个演示，使用控制面板可以更新场景中的自定义CSS属性。这种对CSS自定义属性的范围界定可以节省大量的重复代码，并保持事情的干燥。
