如何使用纯HTML/CSS进行惊人的3D-DEV365 开发者社区

HTML和CSS可能是2D Web设计的基石，但隐藏在虚拟工具箱中的是创建令人叹为观止的3D透视图的秘密。想象一下，制作交互式接口，将Flatland超越X，Y和Z轴一起跳舞的世界。在这篇博客文章中，我们将推出HTML和CSS的3D功能的魔力，从而指导您介绍基本属性和技术以创建令人惊叹的3D视觉效果。

喜欢这个！

介绍

利用HTML的观点

尽管HTML和CSS主要设计用于构造2D布局，但仍有3个轴（X，Y＆Z）通过特定的CSS属性来创建透视图。

`perspective`属性

perspective属性通过调整z轴的vanishing Point位置来改变用户的观点。

例如，使用以下代码，使用以下代码段将在用户和平面之间建立800px的距离（z轴）。

.perspective {
  position: relative;
  perspective: 800px;
}

<div class="perspective"></div>

`perspective-origin`属性

perspective-origin属性确定用户沿x和y轴的位置。

要查看上方的对象，您可以使用以下代码：

.perspective {
  position: relative;
  perspective: 800px;
  perspective-origin: 50% -200px;
}

在此示例中，我们以X轴为中心（50％），并在Y轴上定位-200px。

现在，您已经掌握了HTML和CSS中的3D的要素，让我们开始创建自己的3D Cube！

1.建立基础

对于我们的HTML结构，我们将构建一个透视平面，并为我们的立方体的每个面添加一个DIV元素。

<div class="perspective">
  <div class="box">
    <div class="face top"></div>
    <div class="face bottom"></div>
    <div class="face back"></div>
    <div class="face front"></div>
    <div class="face left"></div>
    <div class="face right"></div>
  </div>
</div>

现在，让我们以特定的视角将我们的视角授予。在我们的情况下，我们希望对我们的立方体看出高架。

.perspective {
  perspective: 800px;
  perspective-origin: 50% -200px;
}

然后，我们将把尺寸分配到我们的框中，并将样式应用于我们的个人面孔。为了将3D渲染保持在我们Div的透视平面中，我们合并了transform-style: preserve-3d。

.box {  
  width: var(--size);
  aspect-ratio: 1;  

  position: relative;
  transform-style: preserve-3d;
}

.face {
  position: absolute;
  width: var(--size);
  aspect-ratio: 1;

  background-color: hsl(
    39,
    100%,
    66%
  );

  transform-style: preserve-3d;
}

此时，您应该看到在同一位置叠加的所有面孔，形成正方形。

2.创建模式

现在，让我们制造立方体的2D图案，然后我们将像纸一样折叠。此外，我们将合并一个旋转动画以进行更好的3D可视化。

创建模式可以简化准确旋转和定位元件的过程，从而防止倒脸混淆。


.box {  
  animation: rotate 4s linear infinite;
}

.face.front {
}

.face.bottom {
  top: 100%;
}

.face.top {
  bottom: 100%;
}

.face.back {
  bottom: 200%;
}

.face.right {
  left: 100%;
}

.face.left {
  right: 100%;
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotateY(360deg);
  }
}

现在，您应该看到一个交叉形状的配置：

3.折叠面部制作立方体

我们的下一步涉及折叠面以创建立方体效果。这需要使用rotateX()，rotateY()并指定折叠通过transform-origin的顶点。

对于背面，我们需要调整y和z轴的transform-origin。

.face.front {
}

.face.bottom {
  top: 100%;
  transform-origin: top;
  transform: rotateX(-90deg);
}

.face.top {
  bottom: 100%;
  transform-origin: bottom;
  transform: rotateX(90deg);
}

.face.back {
  bottom: 200%;
  transform-origin: center 150px -50px;
  transform: rotateX(180deg);
}

.face.right {
  left: 100%;
  transform-origin: left;
  transform: rotateY(90deg);
}

.face.left {
  right: 100%;
  transform-origin: right;
  transform: rotateY(-90deg);
}

4.将阴影涂在脸上

要达到令人信服的3D效果，我们需要向面部引入阴影。尽管CSS缺乏本地照明，但我们可以通过改变颜色的浅色来产生深度的幻觉。

我们将利用hsl()的lightness属性为每张脸部产生不同的阴影。

.face {  
  background-color: hsl(
    39,
    100%,
    var(--lightness)
  );
}

.face.front {
  --lightness: 66%;
}

.face.bottom {
  --lightness: 74%;
}

.face.top {
  --lightness: 74%;
}

.face.back {
  --lightness: 78%;
}

.face.right {
  --lightness: 70%;
}

.face.left {
  --lightness: 70%;
}

现在，您应该看到一个出色的3D立方体，仅用HTML和CSS制成！

我希望本教程激发了您的想象力，可以用纯HTML和CSS创建迷人的3D动画。

随时在评论部分分享您的创作！
对于此类内容，请务必在X上关注我@PaucotMartin（以前为Twitter）。