css怎么創建3D立體的條形圖

這篇文章主要介紹了css怎么創建3D立體的條形圖，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

　　示例代碼在WebKit瀏覽器中效果最好，在Firefox（v13）中也相當不錯。

　　1、設置網格

　　首先設置一個#stage元素，我們可以在其中定義將要查看任何3D轉換的透視圖。基本上是查看器與平面屏幕相關的位置。然后，因為我們正在創建圖形，我們需要設置軸和網格（#chart）。

　　雖然我們可以輕松地創建背景圖像并將其平鋪以形成網格圖案，但我們決定使用CSS線性漸變語法。在下面的所有代碼中，-moz-styles只復制-webkit-樣式。

　　<styletype="text/css">

　　#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;

　　}

　　</style>

　　圖表大小為400x160像素，網格為40像素。如您所見，背景網格由兩個水平和垂直運行的重復漸變組成。圖表已從屏幕傾斜65度。

　　2、定義3D條形圖

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

　　要想象正在應用的變換，請考慮頁面上的垂直十字平面。然后將四個側面旋轉離開我們以形成柱子。簡單。

　　<styletype="text/css">

　　.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%;

　　}

　　</style>

　　在CSS代碼中，我們沒有定義圖表中條形圖的位置或顏色。這需要為每個元素單獨完成。但請注意，我們在可能的情況下使用了inherit屬性來簡化這一過程。

　　3、條形圖HTML標記

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

　　<divid="stage">

　　<divid="chart">

　　<divclass="bar"style="left:80px;background:rgba(255,0,0,0.8);-webkit-transform:translateZ(80px);-moz-transform:translateZ(80px);">

　　<divclass="barfront"style="height:80px;"></div>

　　<divclass="barback"style="height:80px;"></div>

　　<divclass="barright"style="width:80px;"></div>

　　<divclass="barleft"style="width:80px;"></div>

　　20

　　</div>

　　<divclass="bar"style="left:120px;background:rgba(0,127,255,0.8);-webkit-transform:translateZ(120px);-moz-transform:translateZ(120px);">

　　<divclass="barfront"style="height:120px;"></div>

　　<divclass="barback"style="height:120px;"></div>

　　<divclass="barright"style="width:120px;"></div>

　　<divclass="barleft"style="width:120px;"></div>

　　30

　　</div>

　　<divclass="bar"style="left:160px;background:rgba(255,255,0,0.8);-webkit-transform:translateZ(40px);-moz-transform:translateZ(40px);">

　　<divclass="barfront"style="height:40px;"></div>

　　<divclass="barback"style="height:40px;"></div>

　　<divclass="barright"style="width:40px;"></div>

　　<divclass="barleft"style="width:40px;"></div>

　　10

　　</div>

　　</div>

　　</div>

　　在上面的代碼中，您可以看到突出顯示設置圖表中條形圖的x位置的代碼以及每個條形圖的高度（需要為構成條形圖的每個元素定義）。在那里我們應用的顏色（紅色，藍色，黃色）略微透明。

　　4、最終結果

　　如果您使用的是WebKit瀏覽器（Safari，Chrome，iPhone，iPad），那么您應該看到3D條形圖以及一些可用于修改某些值的滑塊。在Firefox中，條形圖有一些人工制品，滑塊呈現為普通輸入框，但仍然有效。

　　1.jpg

　　說明：

　　可以通過修改.bar盒子的數值來實現條形柱的高度變化，例：

　　<divclass="bar"style="left:120px;background:rgba(0,127,255,0.8);-webkit-transform:translateZ(180px);-moz-transform:translateZ(120px);">

　　<divclass="barfront"style="height:180px;"></div>

　　<divclass="barback"style="height:180px;"></div>

　　<divclass="barright"style="width:180px;"></div>

　　<divclass="barleft"style="width:180px;"></div>

　　30

　　</div>

感謝你能夠認真閱讀完這篇文章，希望小編分享的“css怎么創建3D立體的條形圖”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!