分享更有价值
被信任是一种快乐

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{
  heig免费云主机、域名ht: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组成四边。您可以拥有任意数量的条形图并将它们放置在图表上的任何位置。
           

相关推荐: ECMAScript模块中nodejs怎么加载json文件

这篇文章主要讲解了“ECMAScript模块中nodejs怎么加载json文件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“ECMAScript模块中nodejs怎么加载json文件”吧!看完这篇文章,你将学到…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册