css是个神奇的东西。在学习的过程中，你会发现绘画艺术之美。金字塔是世界八大奇迹之一。那么如何用CSS绘制金字塔呢？丑人不多说，先来看看效果吧?思维的金字塔由5个面组成，即4面1底。我们可以把它想象成小时候玩的元宝，或者端午节戴在身上的吉祥字。你为什么这么说？“横看成岭，侧成峰”。当我们看金字塔的顶视图时，会看到这样一个图形。如下图所示，这是一个平面图。如果这个平面图形有三维效果，那不就是金字塔吗？可以通过将上图中的(0,0)沿x轴旋转一定角度来实现。?画画下一步是画出“元宝”的形状，边上有4个三角形，下面有一个正方形。要实现三角形，可以使用clip-path属性来裁剪可见区域。从上图可以看出：clip-path只兼容高版本浏览器。polygon代表一个多边形，所以你可以使用这个属性来绘制更多的图形，如下所示：clip-path:polygon(050%,100%0%,100%100%,050%);剪辑路径：多边形（50%0%，50%0%，100%100%，0%100%）；有了上面的图形之后，我们还需要进行特殊的处理才能得到我们想要的形状。因为我们要建一个金字塔，所以我们的塔的边的高度或者宽度需要大于底部的宽度和长度，否则我们不能建一个尖顶，形成下图：因此，我们需要设置宽度和高度大于底部。这里我们选择高度为200px，宽度为100px，宽度需要和底部宽度保持一致。假设我们现在已经有了一个金字塔，我们可以取它的横截面如下图所示：通过sin函数求解上面的反三角函数$$sinA=\sqrt{(200^2-50^2)/200^2}$$找到A大约是75deg，我们可以类推计算其他图形的旋转角度。将以上两个三角形适当平移旋转得到如下图形：transform:translateZ(-50px)translateY(-100px)rotateX(-75deg);height:200px;transform-origin:0100%;clip-path:polygon(50%0%,50%0%,100%100%,0%100%);变换:rotateX(-180deg)translateZ(50px);高度:200px;transform-origin:0100%;transform:translateZ(-50px)translateY(-200px)rotateX(-105deg);clip-path:polygon(50%0%,50%0%,100%100%,0%100%);width:200px;transform-origin:100%100%；变换：translateZ(-50px)translateX(-200px)rotateY(105deg)；剪辑路径：多边形(0%50%,100%0%,100%100%,0%50%)；宽度：200px；变换原点：100%100%；变换：translateZ(-50px)translateX(-100px)rotateY(75deg)；剪辑路径：多边形(0%50%,100%0%,100%100%,0%50%);合并后，利用css3中的3D变换属性对上图进行变换，可以得到如下图形：transform:rotateX(70deg)rotateZ(45deg);transform-style:preserve-3d;animation:rate10slinearinfinite;从上图可以看出：transform-style:preserve-3d兼容高版本浏览器，支持部分ie浏览器?以上就是本文的全部内容，全部由css实现包括：定位:positionGraphicsclipping:clip-pathelement3D转换:transformanimation绘图：动画效果地址：https://codepen.io/clown-jack...END
