本文介紹的創(chuàng)建立體條形圖的示例，使用了透視和旋轉(zhuǎn)的3D效果，而不僅僅是傾斜變換。結(jié)果是一個(gè)圖表，可以從任何方向查看。

下面我們來(lái)一步一步介紹如何建立，示例代碼在WebKit瀏覽器中效果最好，在Firefox(v13)中也相當(dāng)不錯(cuò)。

1、設(shè)置網(wǎng)格

首先設(shè)置一個(gè)#stage元素，我們可以在其中定義將要查看任何3D轉(zhuǎn)換的透視圖。基本上是查看器與平面屏幕相關(guān)的位置。然后，因?yàn)槲覀冋趧?chuàng)建圖形，我們需要設(shè)置軸和網(wǎng)格(#chart)。

雖然我們可以輕松地創(chuàng)建背景圖像并將其平鋪以形成網(wǎng)格圖案，但我們決定使用CSS線性漸變語(yǔ)法。在下面的所有代碼中，-moz-styles只復(fù)制-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;

}

圖表大小為400x160像素，網(wǎng)格為40像素。如您所見(jiàn)，背景網(wǎng)格由兩個(gè)水平和垂直運(yùn)行的重復(fù)漸變組成。圖表已從屏幕傾斜65度。

2、定義3D條形圖

圖表中的每個(gè)條形圖都由四個(gè)邊和一個(gè)帽組成。這里的樣式是針對(duì)條形CSS類，然后可以在不同的位置和顏色中多次使用。它們?cè)贖TML中定義，您很快就會(huì)看到。

要想象正在應(yīng)用的變換，請(qǐng)考慮頁(yè)面上的垂直十字平面。然后將四個(gè)側(cè)面旋轉(zhuǎn)離開(kāi)我們以形成柱子。簡(jiǎn)單。

.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代碼中，我們沒(méi)有定義圖表中條形圖的位置或顏色。這需要為每個(gè)元素單獨(dú)完成。但請(qǐng)注意，我們?cè)诳赡艿那闆r下使用了inherit屬性來(lái)簡(jiǎn)化這一過(guò)程。

3、條形圖HTML標(biāo)記

在這里，您可以看到實(shí)踐中用于下面演示的代碼。圖表上有三個(gè)條形圖。每個(gè)酒吧都是一個(gè)div，有四個(gè)孩子div組成四邊。您可以擁有任意數(shù)量的條形圖并將它們放置在圖表上的任何位置。

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的如何在html中自动生成条形图,css如何创建3D立体的条形图？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。