css創(chuàng)建3D立體條形圖的方法-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)css創(chuàng)建3D立體條形圖的方法的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)公司長(zhǎng)期為上千多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為新疆企業(yè)提供專業(yè)的做網(wǎng)站、成都網(wǎng)站建設(shè)，新疆網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

示例代碼在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-樣式。

<style type="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: 10em auto;
    width: 400px;
    height: 160px;
    border: 1px solid #000;
    background: -webkit-repeating-linear-gradient(left, rgba(0,0,0,0) 0, rgba(0,0,0,0) 38px, #ccc 40px), -webkit-repeating-linear-gradient(bottom, rgba(0,0,0,0), rgba(0,0,0,0) 38px, #ccc 40px);
    background: -moz-repeating-linear-gradient(left, rgba(0,0,0,0) 0, rgba(0,0,0,0) 38px, #ccc 40px), -moz-repeating-linear-gradient(bottom, rgba(0,0,0,0), rgba(0,0,0,0) 38px, #ccc 40px);
    -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>

圖表大小為400 x 160像素，網(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)單。

<style type="text/css">

  .bar {
    position: absolute;
    bottom: 40px;
    margin: 0 4px;
    width: 32px;
    height: 40px;
    outline: 1px solid #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代碼中，我們沒(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ù)量的條形圖并將它們放置在圖表上的任何位置。

<div id="stage">
	<div id="chart">

		<div class="bar" style="left: 80px; background: rgba(255,0,0,0.8); -webkit-transform: translateZ(80px); -moz-transform: translateZ(80px);">
			<div class="barfront" style="height: 80px;"></div>
			<div class="barback" style="height: 80px;"></div>
			<div class="barright" style="width: 80px;"></div>
			<div class="barleft" style="width: 80px;"></div>
			20
		</div>

		<div class="bar" style="left: 120px; background: rgba(0,127,255,0.8); -webkit-transform: translateZ(120px); -moz-transform: translateZ(120px);">
			<div class="barfront" style="height: 120px;"></div>
			<div class="barback" style="height: 120px;"></div>
			<div class="barright" style="width: 120px;"></div>
			<div class="barleft" style="width: 120px;"></div>
			30
		</div>

		<div class="bar" style="left: 160px; background: rgba(255,255,0,0.8); -webkit-transform: translateZ(40px); -moz-transform: translateZ(40px);">
			<div class="barfront" style="height: 40px;"></div>
			<div class="barback" style="height: 40px;"></div>
			<div class="barright" style="width: 40px;"></div>
			<div class="barleft" style="width: 40px;"></div>
			10
		</div>

	</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)為普通輸入框，但仍然有效。

說(shuō)明：

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

<div class="bar" style="left: 120px; background: rgba(0,127,255,0.8); -webkit-transform: translateZ(180px); -moz-transform: translateZ(120px);">
	<div class="barfront" style="height: 180px;"></div>
	<div class="barback" style="height: 180px;"></div>
	<div class="barright" style="width: 180px;"></div>
	<div class="barleft" style="width: 180px;"></div>
	30
</div>

修改#stage盒子與#chart盒子里的值，可以透過(guò)不同的角度觀看條形圖

#stage {
-webkit-perspective: 1200px;
-webkit-perspective-origin: 60% 0%;
-moz-perspective: 1200px;
-moz-perspective-origin: 60% 0%;
background: rgba(0, 255, 255, 0.2);
}

#chart {
	-webkit-transform-origin: 50% 50%;
	-webkit-transform: rotateX(22deg);
	-webkit-transform-style: preserve-3d;
	-moz-transform-origin: 50% 50%;
	-moz-transform: rotateX(22deg);
	-moz-transform-style: preserve-3d;
}

感謝各位的閱讀！關(guān)于css創(chuàng)建3D立體條形圖的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

分享文章：css創(chuàng)建3D立體條形圖的方法-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://bm7419.com/article0/cesooo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、品牌網(wǎng)站設(shè)計(jì)、商城網(wǎng)站、自適應(yīng)網(wǎng)站、網(wǎng)站營(yíng)銷(xiāo)、網(wǎng)站策劃

廣告

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