css怎么創(chuàng)建3D立體的條形圖

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

為寧蒗等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及寧蒗網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都做網(wǎng)站、成都網(wǎng)站建設(shè)、寧蒗網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(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線性漸變語法。在下面的所有代碼中，-moz-styles只復(fù)制-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像素，網(wǎng)格為40像素。如您所見，背景網(wǎng)格由兩個(gè)水平和垂直運(yùn)行的重復(fù)漸變組成。圖表已從屏幕傾斜65度。

2、定義3D條形圖

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

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

<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代碼中，我們沒有定義圖表中條形圖的位置或顏色。這需要為每個(gè)元素單獨(dú)完成。但請注意，我們在可能的情況下使用了inherit屬性來簡化這一過程。

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

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

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

</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>

</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>

</div>

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

4、最終結(jié)果

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

1.jpg

說明：

可以通過修改.bar盒子的數(shù)值來實(shí)現(xiàn)條形柱的高度變化，例：

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

</div>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css怎么創(chuàng)建3D立體的條形圖”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

文章標(biāo)題：css怎么創(chuàng)建3D立體的條形圖
當(dāng)前網(wǎng)址：http://www.muchs.cn/article32/gcehpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司、定制開發(fā)、營銷型網(wǎng)站建設(shè)、面包屑導(dǎo)航

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容