css怎么創(chuàng)建3D立體的條形圖
這篇文章主要介紹了css怎么創(chuàng)建3D立體的條形圖，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
為寧蒗等地區(qū)用戶(hù)提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及寧蒗網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都做網(wǎng)站、成都網(wǎng)站建設(shè)、寧蒗網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶(hù)提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶(hù)的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！
示例代碼在WebKit瀏覽器中效果最好，在Firefox（v13）中也相當(dāng)不錯(cuò)。
1、設(shè)置網(wǎng)格
首先設(shè)置一個(gè)#stage元素，我們可以在其中定義將要查看任何3D轉(zhuǎn)換的透視圖?；旧鲜遣榭雌髋c平面屏幕相關(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類(lèi)，然后可以在不同的位置和顏色中多次使用。它們?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ù)量的條形圖并將它們放置在圖表上的任何位置。