内容
有多种方法可以在Web上创建3D动画，其中大多数方法都需要对JavaScript和WebGL有充分的了解，或者需要使用Flash之类的插件。多亏了CSS 3D转换，可以仅使用HTML和CSS来创建3D，但这并不容易。我的免费在线应用Tridiv简化了流程，提供了简单直观的所见即所得界面，使用户无需编写任何代码即可创建3D对象。
在本教程中，我们将仅使用HTML和CSS为虚构的唱片公司标签“ Tridiv Records”创建徽标并制作动画。徽标的主要视觉效果将使用Tridiv在3D中创建。然后，我们将使用常规HTML和CSS添加印刷元素。
您可以在此处查看最终动画和生成动画的代码。
入门
我们将首先使用Tridiv创建3D转盘。前往tridiv.com并启动该应用程序。您需要使用Chrome，Safari或Opera 15（或更高版本）。
开始之前，了解Tridiv界面很重要。编辑器的主要部分由四个视图组成：左上方是3D视图，提供了场景的完整视图。其他三个视图从顶部，侧面和正面显示它。使用这三个视图，可以创建，编辑和移动3D形状。
水平工具栏分为两部分：左侧部分显示与您的文档有关的信息；右侧部分包含用于创建和编辑形状的工具。这 移动 选择和 编辑 选择按钮可在不同的编辑模式之间切换。
属性窗格（侧栏）显示文档设置（例如缩放和对齐网格）以及所选形状的属性（大小，位置，旋转，颜色等）。尺寸和位置使用的单位是ems；旋转角度以度为单位。
为了避免在本教程的后面出现任何混乱，我们将使用以下速记：
w =宽度h =高度d =深度直径=直径x deg =沿x轴旋转y deg =沿y轴旋转z deg =沿z轴旋转
创建转盘的底座
首先将缩放值设置为200。要帮助绘制形状，请在 文件设定 侧边栏部分。将捕捉值设置为 0.125.
转盘的底座由一个简单的长方体组成，因此请单击 添加长方体 顶部工具栏中的按钮。您应该看到长方体出现在编辑器的所有四个视图中。
将形状重命名为 根据 使用属性窗格的名称字段（在 形状属性）。形状的名称必须是有效的CSS类名称，因为它将在编辑器生成的代码中使用。稍后在为徽标添加动画效果时，我们将使用这些类名，因此请确保为正确创建的每个新形状命名。
命名长方体后，请确保在顶视图中将其选中（它应以蓝色突出显示，并带有圆环的工具环），然后单击 编辑 环顶部的按钮以显示编辑手柄。拖动长方体侧面的控制手柄，直到达到宽度和深度 w = 10 和 d = 8 在里面 形状属性.
单击侧视图中的形状。这将在此视图中显示编辑手柄，从而允许我们更改其高度。调整高度，直到达到 h = 2。您也可以直接在属性窗格中键入值。要修整长方体的角，请将属性窗格中的角值更改为 1.75，然后按 [进入] 应用更改的关键。您将拥有类似的东西。
创造脚
对于转盘的脚，我们将使用圆柱体。添加一个圆柱体，然后将其直径更改为 直径= 1.75 及其高度 h = 0.5。点击 移动 顶部工具栏中的“选择”按钮以显示形状上的可拖动区域。将圆柱体移到底座下方，并将其放在角落之一中。 （您可能需要在顶视图，侧视图和前视图中移动它。）
复制圆柱体（按 复制 按下工具圆环中的按钮，或按 d 键），然后将新的圆柱体移到基座的另一个角。重复该过程，直到所有四只脚都正确定位为止。别忘了给气瓶命名（例如， 左上角, 右上脚, 左下脚, 左上角）。完成此操作后，结果应如下所示。
现在，我们来看看如何创建盘片，光盘，手臂轴和按钮。创建下一个形状的过程与脚类似。以下是用于不同气缸的尺寸：
拼盘：直径= 7; h = 0.5圆盘：直径= 6.75； h = 0,25按钮：diam = 1.5； h = 0,25臂轴基：直径= 2.25； h = 0,25手臂轴：diam = 1.375； h = 1
要优化圆柱体的侧面，可以使用属性窗格中的“侧面”字段来增加每个圆柱体的面数。不要添加过多的面，因为这会对编辑器和最终动画的整体效果产生负面影响。在这种情况下，建议您不要在盘片和光盘上使用超过32个面。你应该有这样的东西。
手臂和头部
对于转盘的手臂和头部，我们将使用长方体。对于手臂，创建一个长方体（w = 0.25； h = 0.25； d = 4），然后旋转 -33° 在 y轴。对于头部，创建一个长方体（w = 0.5; h = 0.5； d = 1），然后旋转 -33° 在 y轴。将这两个形状与手臂轴圆柱体对齐。结果应如下所示。
颜色和纹理
转台已经差不多完成了。最后一步是分配颜色并将纹理应用于乙烯基（代表记录表面的图像）。要分配颜色，请选择一个形状，然后单击 颜色 属性窗格中的字段。 Tridiv允许您为形状的每个面指定单独的颜色，但是在此示例中，我们需要使用all字段来更改所有面的颜色。为此，只需在字段中输入十六进制颜色代码，然后按确认 进入.
这是此示例中使用的颜色：
基本：＃0099FF脚，按钮，轴，手臂和头部：＃F2EEE5光盘：＃fa7f7a
对于乙烯基的质地，该过程类似于分配颜色。选择碟片滚筒，然后单击 图片 属性窗格中的字段。将要应用的图像的URL粘贴到顶部字段中的乙烯基上，然后按进行确认 进入。您可以使用自己的图像，也可以下载本示例中使用的图像。
您现在应该拥有类似以下的内容。
渲染和导出
既然转盘已经制作完成，我们将在导出之前按照渲染的方式进行工作。点击 预习 属性窗格顶部的按钮。将缩放值设置为 200 以显示更大的转盘。要删除形状的黑色边框，请转到 边框 窗格的“部分”，并将“不透明度”设置为 0。结果应如下所示。
我们希望转盘从顶部点亮。为此，请以使转盘顶部朝向您的方式旋转场景。底座看起来应该是完美的矩形。在属性窗格的tridiv.com/d/4k6部分中更改明暗值将重新生成场景中的阴影。将光值更改为 0.
转盘现在可以出口了！
整理徽标
我们准备将文本添加到徽标中并创建徽标动画。点击 编辑 在左下方的CodePen按钮上 预习 视图以将代码导出到CodePen。请务必注意，Tridiv生成的CSS代码不使用供应商前缀，因此您需要使用诸如prefixr.com或Leaverou.github.io/prefixfree之类的工具，才能使该代码在每个浏览器中都能正常工作。首先关闭JavaScript窗格，因为我们将不使用它。在HTML窗格中，删除应用于 。场景 div。
展开CSS窗格，并在末尾添加以下代码：
.scene {转换：translateY（-140px）rotationX（-55deg）; }
在这里， translateY（-140px）将转盘向上移动140px，在其下方留有空间。然后， 旋转X（-55deg） 设置转盘的垂直倾斜度。
要添加文字，您需要添加一个 。标题 div开幕后马上 #tridiv HTML窗格中的div。里面加两个 跨度> (.main-title和.sub-title），以 hr />:
div id =“ tridiv”> div>跨度> TRIDIV / span> hr />跨度> RECORDS / span> / div>…
然后，您需要应用正确的字体和样式。在CSS窗格中，导入徽标中使用的Open Sans字体，然后添加文本元素的基本样式。
@import url（http://fonts.googleapis.com/css?family=Open+Sans:300）; / *文本块居中+基本字体样式 * /标题{位置：绝对；最高：50％；左：50％；边距：0 0 0 -165px;宽度：330像素；高度：5em；字体系列：“ Open Sans”，sans-serif；字体粗细：300； font-size：24px;文本对齐：居中；字母间距：1.5em；颜色：＃0099FF; } title hr {border：1px solid＃fa7f7a;边距：.75em 0; } title span {display：block; } .main-title {font-size：2.15em; } .sub-title {text-indent：.25em; }
哎呀！您的徽标是完整的。它看起来应该像下面的图像。完成3D模型后，您可以使用CSS的功能，通过添加样式，动画或鼠标事件来使它变得更好：就像对待其他任何HTML元素一样对待3D模型。
动画徽标
在此处查看使用徽标的动画。当转盘的各个部分“掉进”时，它们各自共享相同的关键帧动画，但延迟有所不同。形状的top属性设置为 50%。为了创建下降效果，我们为的top属性设置了动画 -400像素 至 50%:
@keyframes掉落{0％{顶部：-400px; } / *我们开始动画，将形状定位到400px的高度 * / 100％{top：50％; } / *然后将其终止于其原始位置 * /}
您可以将该动画添加到所有形状中，如下所示：
.shape {顶部：-400px;动画：下降1s缓解0s向前； }
将top属性设置为 -400像素 并添加一个延迟：
.platter {animation-delay：1.05s; } .disc {动画延迟：1.35秒； } .button {animation-delay：1.5s; } ...
使用 旋转X 属性：
90％{变换：translateY（-5em）rotateX（780deg）rotateY（0deg）； } 95％{变换：translateY（-4em）rotationX（620deg）rotationY（0deg）; } 100％{变换：translateY（-4.5em）rotationX（660deg）rotateY（0deg）; }
这就是我们创建此特定版本的方式，但是请记住：没有限制！
字： 朱利安·加尼尔（Julian Garnier）
本文最初发表在《网络》杂志第248期。
