css如何建立3D立體的長條圖？建立3D立體的長條圖的範例

本篇文章為大家介紹css建立3D立體的長條圖的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

本文介紹的創建立體長條圖的範例，使用了透視和旋轉的3D效果，而不僅僅是傾斜變換。結果是一個圖表，可以從任何方向查看。

下面我們來一步一步介紹如何建立，範例程式碼在WebKit瀏覽器中效果最好，在Firefox（v13）中也相當不錯。

1、設定網格

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

雖然我們可以輕鬆地建立背景影像並將其平鋪以形成網格圖案，但我們決定使用CSS 線性漸變語法。在下面的所有程式碼中，-moz- styles只複製  -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像素，網格為40像素。如您所見，背景網格由兩個水平和垂直運行的重複漸變組成。圖表已從螢幕傾斜65度。

2、定義3D長條圖

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

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

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

3、長條圖HTML標記

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

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

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

4、最終結果

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

說明：

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

<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盒子裡的值，可以透過不同的角度觀看長條圖

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

總結：以上就是這篇文章的全部內容，希望對大家的學習有所幫助。

以上是css如何建立3D立體的長條圖？建立3D立體的長條圖的範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！