Animated 3D Bar Chart with CSS3

Trước đây việc tạo một 3D bar chart trọng HTML thương sử dụng CSS, Image và Javascipt. Bài viết này tôi xin giới thiệu tới các bạn một cách tạo 3D Chart chỉ sử dụng CSS.
Bây giờ chúng ta sẽ chia công việc ra làm 2 phần

• Khởi tạo các giao diện 3D Bar
• Tạo hoạt động cho các thanh 3D Bar Chart

Khởi tạo Giao diện

Mỗi một khối Bar để có cấu chúc 3D cần phải co cấu trúc HTML như sau: HTML

<div class="bar-wrapper">
  <div class="bar-container">
    <div class="bar-background"></div>
    <div class="bar-inner">50</div>
    <div class="bar-foreground"></div>
  </div>
</div>

• bar-wrapper : Div Vỏ ngoài cùng
• bar-container : Vỏ bao gồm Nền sau
• bar-background :Vỏ bao gồm 3 mặt: Sau , Đáy , Trái
• bar-foreground : Vỏ bao gồm 3 mặt: Trước , Phải , Đỉnh
• bar-inner : Là vỏ của phần bên trong Chart : Gồm vỏ đỉnh , trái và trước

CSS

.bar-wrapper {
  overflow: hidden;
}
.bar-container {
  position: relative;
  margin-top: 2.5em; 
  awidth: 12.5em;
}
.bar-container:before {
  content: "";
  position: absolute;
  z-index: 3; 
  bottom: 0;
  right: 0;
  awidth: 0;
  height: 0;
  border-style: solid;
  border-awidth: 0 0 2.5em 2.5em;
  border-color: transparent transparent rgba(183,183,183,1);
}
.bar-background {
    awidth: 10em;
    height: 100%;
    position: absolute;
    top: -2.5em;
    left: 2.5em;
    z-index: 1;
    background-color: rgba(160, 160, 160, .1);
}
.bar-background:before {
    bottom: -2.5em;
    right: 1.25em;
    awidth: 10em;
    height: 2.5em;
    transform: skew(-45deg);
    background-color: rgba(160, 160, 160, .2);
}
.bar-background:after {
    top: 1.25em;
    right: 10em;
    awidth: 2.5em;
    height: 100%;
    transform: skew(0deg, -45deg);
    background-color: rgba(160, 160, 160, .05);
}

Tạo hoạt động cho các thanh 3D Bar Chart

Vì là css lên hoạt động click thường sử dụng nhờ sự kiện checked của Radio HTML

<span class="button-label">Size:</span>
    <input type="radio" name="resize-graph" id="graph-small" /><label for="graph-small">Small</label>
    <input type="radio" name="resize-graph" id="graph-normal" checked="checked" /><label for="graph-normal">Normal</label>
    <input type="radio" name="resize-graph" id="graph-large" /><label for="graph-large">Large</label>   

    <span class="button-label">Color:</span>
    <input type="radio" name="paint-graph" id="graph-blue" checked="checked" /><label for="graph-blue">Blue</label>
    <input type="radio" name="paint-graph" id="graph-green" /><label for="graph-green">Green</label>
    <input type="radio" name="paint-graph" id="graph-rainbow" /><label for="graph-rainbow">Rainbow</label>

    <span class="button-label">Product:</span>
    <input type="radio" name="fill-graph" id="f-none" /><label for="f-none">None</label>
    <input type="radio" name="fill-graph" id="f-product1" checked="checked" /><label for="f-product1">Product 1</label>
    <input type="radio" name="fill-graph" id="f-product2" /><label for="f-product2">Product 2</label>
    <input type="radio" name="fill-graph" id="f-product3" /><label for="f-product3">Product 3</label>

CSS

    input#f-product1:checked ~ .graph-container > li:nth-child(1) .bar-inner {
        height: 25%;
        bottom: 0;
    }

Links Demo https://codepen.io/But/pen/qorLmg