CSS 3D世界，纯CSS如何绘制三棱锥

「这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战」

CSS如何制作三棱锥？

结构

三棱锥，大家看图，应该能看到它共有4个面，分别是3个侧面，1个底面。我们将其细分为，前面、左面、右面和底面。用html表示如下：

<ul class="cones-inner">
  <li class="front"></li>
  <li class="right"></li>
  <li class="left"></li>
  <li class="bottom"></li>
</ul>
复制代码

逐个击破

CSS三角形

每个面都是一个三角形，下面我们用CSS制作一个三角形，之前有很多文章都有写过，今天还是再写一次。

width: 0;
height: 0;
border-top: 100px solid black;
border-right: 100px solid red;
border-left: 100px solid blue;
border-bottom: 100px solid green;
复制代码

大家看，给一个div设置不同的边颜色，就会组成如上图的图形。这样我们就可以画出一个三角形了，比如上、左、右都是透明色，就一会看到底边的绿色了。

width: 0;
height: 0;
border-top: 100px solid transparent;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
border-bottom: 100px solid green;
复制代码

OK，下面运用到我们三棱锥上面

CSS三棱锥的组成

.cones-inner {
  position: absolute;
  display: block;
}
.cones-inner li {
  position: absolute;
  list-style: none;
  top: 0;
  z-index: 10;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 100px solid rgba(80,80,80,.7);
}
复制代码

这里，其实有4个三角形，不过每个都重叠在一起了，用了绝对定位。

一、右侧面

.cones-inner .left {
  border-bottom: 100px solid rgba(120,120,120,.7);
  transform: rotate3d(1, 1.732, 0, -70.5deg);
}
复制代码

transform: rotate3d(x, y, z, angle);

参数解析:

（1）.x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值。

（2）.y：是一个0到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值。

（3）.z：是一个0到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值。

（4）.angle：一个角度值，指定在3D空间旋转角度，正值顺时针旋转，反之元素逆时。

接着，咱们改变右侧面的位置，使其顶角重合。

.cones-inner .left {
  border-bottom: 100px solid rgba(120,120,120,.7);
  transform: rotate3d(1, 1.732, 0, -70.5deg);
  transform-origin: 75% 50%;
}
复制代码

transform-origin: x-axis y-axis z-axis;

transform-origin 属性允许您改变被转换元素的位置。定义视图被置于 X/Y/Z 轴的何处。

二、同理制作出其他几个面

.cones-inner .front {
  border-bottom: 100px solid rgba(80,80,80,.7);
  transform: rotate3d(-1, 1.732 , 0, 70.5deg);
  transform-origin: 25% 50%;
}
.cones-inner .right {
  border-bottom: 100px solid rgba(160,160,160,.7);
  transform: rotate3d(1, 0, 0, 70.5deg);
  transform-origin: 50% 100%;
}
复制代码

是不是觉得少了点什么？

底面没有提到，对的。底面上面默认值有些了。li里面的border-bottom就可以作为底面了，当然，也可以重新写啦

.cones-inner .bottom {
  border-bottom: 100px solid rgba(200,200,200,.7);
}
复制代码

3D动画

我们添加一个动画，让三棱锥可以旋转起来

.cones-inner{
  animation: slowRotate 6s ease-in-out infinite 2s;
}

@keyframes slowRotate {
  0% {
    -webkit-transform: rotateY(35deg);
    transform: rotateY(35deg);
  }
  100% {
    -webkit-transform: rotateY(395deg);
    transform: rotateY(395deg);
  }
}
复制代码

``

哈哈，添加完后发现，这动画怎么有点纸片儿的意思啊，完全没有3D效果。

这是原因什么呢？

原来，我们没有指定元素在3D空间中呈现，需要加一个属性。

.cones-inner{
  transform-style: preserve-3d 
}
复制代码

transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d。

其中flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。

也就是说，如果对一个元素设置了transform-style的值为flat，则该元素的所有子元素都将被平展到该元素的2D平面中进行呈现。沿着X轴或Y轴方向旋转该元素将导致位于正或负Z轴位置的子元素显示在该元素的平面上，而不是它的前面或者后面。如果对一个元素设置了transform-style的值为preserve-3d，它表示不执行平展操作，他的所有子元素位于3D空间中。

好了，这样我们的三棱锥就完美的制作好了，是不是有get到了？

下面我们总结一下吧

小结

本小结知识:

1、CSS三角形的制作

2、transform: rotate3d(x, y, z, angle) 元素3D变换

3、transform-origin 元素3D位置

4、transform-style: preserve-3d 元素3D呈现

5、其实设置颜色也是非常重要的，如果每个面的颜色都一样，那将看不到该有的效果（如下图）。

小伙伴们，有问题可以评论区留言哦，欢迎大家点评。

谢谢大家一直以来的支持。