CSS3近些年來發展迅速，越來越多的動畫效果可以通過CSS3實現。其中，3D動畫效果給人們留下深刻的印象，而CSS3就可以非常輕松地實現3D柱狀圖動畫效果。

代碼如下：
HTML部分：
<div class="chart">
<div class="bar">75</div>
<div class="bar">90</div>
<div class="bar">60</div>
<div class="bar">85</div>
<div class="bar">50</div>
</div>
CSS部分：
.chart {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-end;
height: 400px;
}
.bar {
position: relative;
bottom: 0;
width: 50px;
margin: 0 30px;
background-color: #8CF;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
transition: height 0.5s ease-in-out, transform 0.5s ease-in-out;
transform-origin: bottom;
}
.bar:hover {
height: 100%;
transform: rotateX(90deg);
}
.bar:hover::before {
content: attr(data-value);
position: absolute;
top: -30px;
left: -20px;
width: 90%;
background-color: #8CF;
color: #fff;
font-size: 20px;
padding: 5px 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
text-align: center;
transform: rotateX(90deg);
}

上述代碼中，我們首先將整個柱狀圖的容器設置為Flex布局，并且設置justify-content和align-items屬性使得所有柱子都垂直居中。每根柱子的寬度為50px，使用margin屬性隔開。柱子的高度初始值為0，當鼠標懸停時，高度變為100%。同時，柱子還會繞x軸旋轉90度，產生3D效果。同時，使用transform-origin屬性將柱子的旋轉中心設置在底部。

在柱子懸停時，使用偽元素before以及內容屬性content添加數據，可以在柱子上方顯示對應數據值。同時，對顯示數據的偽元素也進行繞x軸旋轉90度，使得顯示數據位置與柱子重合。

總的來說，通過CSS3實現3D柱狀圖動畫效果確實非常簡單，只需要靈活運用Flex布局和transform屬性即可。通過這種方式，我們可以給網站添加非常多的動畫效果，為用戶提供更好的體驗。