css如何创建3D立体的条形图？

1、css如何创建3d立体的条形图？1、设置网格首先设置一个stage元素，我们可以在其中定义将要查看任何3d转换的透视图。基本上是查看器与平面屏幕相关的位置。然后，由于我们正在创建图形，我们需要设置轴和网格（chart）。虽然我们可以轻松地创建背景图像并将其平铺以形成网格图案，但我们打算用法css线性渐变语法。在下面的全部代码中，-moz-styles只复制-webkit-样式。stage-webkit-perspective:1200px;-webkit-perspective-origin:0%0%;-moz-perspective:1200px;-moz-perspective-origi

2、n:0%0%;background:rgba(0,255,255,0.2);chartposition:relative;margin:10emauto;width:400px;height:160px;border:1pxsolid000;background:-webkit-repeating-linear-gradient(left,rgba(0,0,0,0)0,rgba(0,0,0,0)38px,ccc40px),-webkit-repeating-linear-gradient(bottom,rgba(0,0,0,0),rgba(0,0,0,0)38px,ccc40px);backg

3、round:-moz-repeating-linear-gradient(left,rgba(0,0,0,0)0,rgba(0,0,0,0)38px,ccc40px),-moz-repeating-linear-gradient(bottom,rgba(0,0,0,0),rgba(0,0,0,0)38px,ccc40px);-webkit-transform-origin:50%50%;-webkit-transform:rotatex(65deg);-webkit-transform-style:preserve-3d;-moz-transform-origin:50%50%;-moz-tr

4、ansform:rotatex(65deg);-moz-transform-style:preserve-3d;图表大小为400x160像素，网格为40像素。如您所见，背景网格由两个水平和垂直运行的重复渐变组成。图表已从屏幕倾斜65度。2、定义3d条形图图表中的每个条形图都由四个边和一个帽组成。这里的样式是针对条形css类，然后可以在不同的位置和色彩中多次用法。它们在html中定义，您很快就会看到。要想象正在应用的变换，请考虑页面上的垂直十字平面。然后将四个侧面旋转离开我们以形成柱子。容易。.barposition:absolute;bottom:40px;margin:04px;width:

5、32px;height:40px;outline:1pxsolid000;text-align:center;line-height:40px;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;font-size:20px;.barfront,.barback,.barleft,.barrightposition:absolute;outline:inherit;background:inherit;.barfrontwidth:inherit;bottom:0;-webkit-transform:rota

6、tex(90deg);-webkit-transform-origin:50%100%;-moz-transform:rotatex(90deg);-moz-transform-origin:50%100%;.barbackwidth:inherit;top:0;-webkit-transform:rotatex(-90deg);-webkit-transform-origin:50%0;-moz-transform:rotatex(-90deg);-moz-transform-origin:50%0;.barrightheight:inherit;right:0;-webkit-transf

7、orm:rotatey(-90deg);-webkit-transform-origin:100%50%;-moz-transform:rotatey(-90deg);-moz-transform-origin:100%50%;.barleftheight:inherit;left:0;-webkit-transform:rotatey(90deg);-webkit-transform-origin:0%50%;-moz-transform:rotatey(90deg);-moz-transform-origin:0%50%;在css代码中，我们没有定义图表中条形图的位置或色彩。这需要为每个元素单独完成。但请注重，我们在可能的状况下用法了inherit属性来简化这一过程。3、条形图html标志在这里，您可以看到实践中用于下面演示的代码。图表上有三个条形图。每个酒吧都是一个div，有四个孩子div组成四边。您可以拥有随意数量的条形图并将它们放置在图表上的任何位置。203010在上面的代码中，您可以看到突出显示设置图表中条形图的x位置的代码以及每个条形图的高度（需要为构成条形图的每个元素定义）。在那里我们应用的色彩（红色，蓝色，黄色）稍微透亮。4、终于结果假如您用法的是we