首先我们来看一下要实现的效果：本文实现的动画效果源于一个小idea，来自另一个网站的一篇文章，描述了如何使用CSS、图像和JavaScript在网页中创建三维直方图。读完那篇文章后，我想接受挑战，尝试使用纯CSS实现同样的效果。一开始的难点是创建一个六边形的半透明立方体，后来的难点是如何创建一个完整的带有动画效果的3D直方图。接下来，让我们看看如何解决这些困难。让我们首先列出一些要实现的要求。我们实现的直方图应该是：背景无关（即直方图和背景互不影响）自适应（列数不会影响布局）可扩展（如矢量图一样）易于定制（颜色，大小和比例）规划是任何项目中最重要的部分之一。所以我们必须先制定一个计划。在实际编码之前，我通常会列出我将在项目中遇到的潜在挑战以及这些挑战的解决方案，然后重复这个过程，直到我得到一些看起来像执行策略的东西。以下是我为这个项目提出的挑战和解决方案的列表：挑战1-具有可扩展内核的列我们知道直方图是由6个面组成的三维图形。这个直方图的内核是垂直可扩展的，并且有一个隐藏它的选项所以，我们需要：一个生成直方图的三个边（后、下、左）的div一个生成直方图的其他三个边的div(front,top,right)一个div，生成核心圆柱体的三个面，和上面第二个div类似，但是它的z-index值小了一个div，作为容器，用来定位上面三个组件,并在右下角实现一个纯色背景的div和一个带有overflow:hidden的容器，用来在核心列高度为0时隐藏。一共有五个div。您可能想知道为什么我们需要两个容器？好吧，这是一个很难解释的问题，但我会尽力把它说清楚。我们需要每列至少一个容器（以保持前三个div到位），并且由于我们的列核心是可扩展的，所以我们使用百分比来操纵核心的高度，这要求容器的高度等于bar图形Y轴的高度。这看起来不错，但是，还有另一个问题，应该有一个隐藏移动内核的选项，这意味着它应该在“低于栏”并隐藏。你可能会说有一个解决方法——overflow:hidden，是的，但是它对这里的容器不起作用，因为它的高度会比实际的列高短，这就是我们添加另一个容器的原因。希望我说清楚了，让我们继续。挑战2——坐标轴坐标轴应该：是一个三维坐标轴，包含3个面（背景面、X轴面、Y轴面）以及面的个数和属性（宽、高等）背景独立自适应圆柱体外面有X轴和Y轴的文本标签所以，我们需要：一个无序列表X轴标签每个列表项有一个span元素每个列表项有一个列Y轴标签包含一个无序列表实现现在我们有了一个总体规划，让我们将其转化为代码。请注意，文章中的代码没有写浏览器前缀。实际工程中请不要遗漏。挑战1-具有可拉伸核心的柱子
