3D中的CSS：学会在多维数据集而不是盒子中思考

我进入CSS的旅程不是您典型的前端开发人员的故事。我最初是Java程序员，我的最初CSS体验仅限于Visual Studio中的颜色选择。

我对前端开发以及随后的CSS的热情稍后引发，与CSS3的兴起相吻合。 3D和动画的魅力吸引了我，比布局或色彩理论更深刻地塑造了我对CSS的理解。

花了大量时间制作3D CSS效果，我已经完善了工作流程。本文分享了我当前的方法，提供了提高3D CSS技能的技巧和技巧。

Cuboid：您的基本构建块

对于大多数3D创作，Cuboid用作主要元素。尽管更复杂的形状是可以实现的，但他们要求更加关注细节。曲线特别是目前的挑战，尽管存在解决方案的技术（稍后讨论）。

创建基本的立方体不涵盖；有关指导，请参阅Ana Tudor的出色帖子或此屏幕截图。本质上，父元素封装了cuboid，其中包含六个代表其面部的子元素。至关重要的是， transform-style: preserve-3d;必须应用于全球理想的应用：

 * {转换风格：Preserve-3d; }

对于复杂的3D模型，将整个场景视为立方体的组装。考虑一本3D书：四个立方体 - 每个盖子，一个用于脊柱，一本用于页面 - 背景图像增加了修饰触感。

场景建设：建立基础

将长方体视为乐高积木。简化过程涉及创建“平面”元素，这是您3D模型所在的基础表面。这简化了旋转和移动。

我首选的方法首先是沿X和Y轴旋转平面，然后用rotateX(90deg)将其扁平化。随后，添加新的立方体涉及将它们放置在平面元件中，使用position: absolute用于精确定位。

 。飞机 {
  变换：rotatex（calc（-var（-otate-x，-24） * 1deg））rotatey（calc（var（ -  rotate-y，-24） * 1deg））rotatex（90deg）translate3d（0，0，0，0）;
}

用样板和哈巴狗简化开发

创建众多立方体的重复性需要一种简化的方法。我利用Pug（一种模板发动机）通过混合蛋白生成长方体结构。 （如果需要的话，可以进行快速的哈巴狗介绍。）

使用哈巴狗的典型场景结构看起来像这样：

 Mixin Cuboid（className）
  .cuboid（class = className）
    // cuboid的每个脸的六个div元素...

我的Cuboid类的相应CSS是：

 .cuboid {
  // ...（CSS用于立方样式）...
}

...（CSS规则针对Cuboid的每个脸）...

利用CSS变量的力量

CSS变量（自定义属性）的广泛使用可显着提高效率。我的立方体是由变量驱动的：

• --width ：飞机上的立方宽度
• --height ：飞机上的长方体高度
• --depth ：立方深度
• --x ：x在飞机上的位置
• --y ：y在飞机上的位置

vmin主要用于响应尺寸。飞机铺设平坦，允许直观的高度，宽度和深度参考。

与DAT.GUI进行调试：实时控制和检查

方便的DAT.GUI库有助于实时调试。它允许在运行时修改CSS变量，从而轻松调整旋转，位置和尺寸。使用DAT旋转飞机。Gui有助于可视化空间关系。

居中和定位：精确和组织

每个立方有意居中，在平面上方的一半上方和一半以上。这简化了动画，尤其是z轴旋转。对于复杂的场景，子平台增强了组织，可以独立地操纵部分。

美学：改进和视觉吸引力

结构完成后，重点转移到美学。 CSS变量对颜色和阴影的一致使用会增强视觉和谐。背景图像和伪元素增加了细节和纹理。 brightness()等过滤器可以巧妙地调整面部的阴影。

深度的幻象：烟与镜子技术

有时，“人造” 3D效应会产生令人信服的深度，而元素较少。策略性定位和旋转的平坦元素可以模仿3D形状。

解决不规则形状：解决创意问题

不规则形状需要逐案溶液。多边形可以近似曲线，而透视技巧可以产生深度的幻想。

Z战斗：解决重叠元素冲突

Z-Righting（在其中重叠的元素闪烁）通过仔细的DOM订购和轻微的位置偏移来解决，以防止冲突。

结论：启动您的3D CSS旅程

接受3D CSS的挑战，尝试不同的技术，并分享您的创作。请记住，耐心和创造力是这项有益的努力的关键要素。

以上是3D中的CSS：学会在多维数据集而不是盒子中思考的详细内容。更多信息请关注PHP中文网其他相关文章！