CSS3D世界，纯CSS如何绘制三棱锥
非常抱歉，断更了半年，原因也是有很多，疫情期间在老家也是没有电脑，上班后非常的忙，种种原因吧。
让小伙伴们久等了，非常抱歉！后续还是保持正常更新，不辜负小伙伴们的信任。
下面还是回归今天的主题：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、其实设置颜色也是非常重要的，如果每个面的颜色都一样，那将看不到该有的效果（如下图）。
最后再说说声抱歉。
小伙伴们，有问题可以评论区留言哦，欢迎大家点评。需要源码的小伙伴可以购买，私信我哦。
腾讯云开发者
