css創建3D立體條形圖的方法

這篇文章給大家分享的是有關css創建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立體條形圖的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！