css怎么创建3D立体的条形图

这篇文章主要介绍了css怎么创建3D立体的条形图，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
　　示例代码在WebKit浏览器中效果最好，在Firefox（v13）中也相当不错。
　　1、设置网格
　　首先设置一个#stage元素，我们可以在其中定义将要查看任何3D转换的透视图。基本上是查看器与平面屏幕相关的位置。然后，因为我们正在创建图形，我们需要设置轴和网格（#chart）。
　　虽然我们可以轻松地创建背景图像并将其平铺以形成网格图案，但我们决定使用CSS线性渐变语法。在下面的所有代码中，-moz-styles只复制-webkit-样式。
　　 　　#stage{
　　-webkit-perspective:1200px;
　　-webkit-perspective-origin:0%0%;
　　-moz-perspective:1200px;
　　-moz-perspective-origin:0%0%;
　　background:rgba(0,255,255,0.2);
　　}
　　#chart{
　　position:relative;
　　margin:10emauto;
　　width:400px;
　　height:160px;
　　border:1pxsolid#000;
　　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);
　　background:-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-transform:rotateX(65deg);
　　-moz-transform-style:preserve-3d;
　　}
　　
　　图表大小为400×160像素，网格为40像素。如您所见，背景网格由两个水平和垂直运行的重复渐变组成。图表已从屏幕倾斜65度。
　　2、定义3D条形图
　　图表中的每个条形图都由四个边和一个帽组成。这里的样式是针对条形CSS类，然后可以在不同的位置和颜色中多次使用。它们在HTML中定义，您很快就会看到。
　　要想象正在应用的变换，请考虑页面上的垂直十字平面。然后将四个侧面旋转离开我们以形成柱子。简单。
　　 　　.bar{
　　position:absolute;
　　bottom:40px;
　　margin:04px;
　　width:32px;
　　height:40px;
　　outline:1pxsolid#000;
　　text-align:center;
　　line-height:40px;
　　-webkit-transform-style:preserve-3d;
　　-moz-transform-style:preserve-3d;
　　font-size:20px;
　　}
　　.barfront,.barback,.barleft,.barright{
　　position:absolute;
　　outline:inherit;
　　background:inherit;
　　}
　　.barfront{
　　width:inherit;
　　bottom:0;
　　-webkit-transform:rotateX(90deg);
　　-webkit-transform-origin:50%100%;
　　-moz-transform:rotateX(90deg);
　　-moz-transform-origin:50%100%;
　　}
　　.barback{
　　width:inherit;
　　top:0;
　　-webkit-transform:rotateX(-90deg);
　　-webkit-transform-origin:50%0;
　　-moz-transform:rotateX(-90deg);
　　-moz-transform-origin:50%0;
　　}
　　.barright{
　　height:inherit;
　　right:0;
　　-webkit-transform:rotateY(-90deg);
　　-webkit-transform-origin:100%50%;
　　-moz-transform:rotateY(-90deg);
　　-moz-transform-origin:100%50%;
　　}
　　.barleft{
　　height: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组成四边。您可以拥有任意数量的条形图并将它们放置在图表上的任何位置。
　　 　　 　　 　　

相关推荐: 欢乐拼图小程序系统如何开发

本篇内容介绍了“欢乐拼图小程序系统如何开发”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ 　　设置图片和红包-生成口令小程序，欢乐拼图可以发到朋友圈和群，朋友需…