CSS艺术：离职办公室

这是由 Axero 赞助的前端挑战赛：办公版，CSS 艺术：办公文化的参赛作品。

灵感

我开始追剧《离职》（Severance）（请不要剧透！），剧中办公室的布局吸引了我。所以我决定用HTML和3D CSS来复刻剧中的办公桌。

这或许不是办公室文化的最佳范例，但它毕竟是在办公室里，而且是流行文化……所以也算办公室文化吧？😅

演示

旅行

我首先定义了一个由两个部分组成的通用“立方体”图形。设置了一些自定义属性，例如宽度、高度和深度，这样我就可以快速对其进行自定义，并快速生成矩形/立方体形状。

我后来才意识到一个问题：我之前处理立方体旋转的方式，有时显示的是正面，有时显示的是背面（所以面板看起来像是翻转的）。这虽然不是什么大问题，但导致我不得不重新定义一些背景。我发现这个问题有点晚了（因为我一开始只用了没有渐变的纯色背景），所以就没去修改代码。不过，我可能会在27号截止日期前把它清理一下。

接下来，我耍了点小聪明：这四个隔间其实都一样，只是平移和旋转了一下。所以我只写了一个隔间的代码，完成后，我复制粘贴了四次，并在每个隔间里添加了一些小细节（比如纸巾盒、黑板上的便条、笔筒……）。

这时我发现了一个奇怪的问题：我把隔间分别旋转了 0 度、90 度、180 度和 270 度，但旋转了 180 度的那个隔间竟然消失了！检查代码后，一切似乎都没问题。查看开发者工具，所有元素都已就位……但它们就是不可见。实际上，它们都被扁平化到容器里了。

我当时用的是 Chrome 浏览器，所以我在 Safari 和 Firefox 上也测试了一下……结果在这两个浏览器上都没问题。看来是 Chrome 特有的问题。是 bug 吗？看起来像是。

然后我又测试了一件事。之前我发现 Safari 有个 bug：当渐变色的停止点设为 100% 时，它会忽略后续的颜色。一个变通方法是将停止点设为 99.99%。这样效果几乎和 100% 一样，浏览器也能正确显示。

所以我尝试了类似的方法：我没有将隔间旋转180度，而是旋转了179.999度……结果成功了！这个问题只在旋转180度时才会出现。

就像 Safari 的 bug 一样，我也向 Chrome 提交了这个问题报告，并在工单中附上了上面的演示链接。所以我想这个演示（以及编程挑战）现在应该和 Chrome 的一个 bug 有关了。不管是好是坏。😅

执照

本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。这意味着您可以自由复制、重复使用和修改此图（非商业用途），只要您对作者给予适当的署名即可。