Pure CSS 3D Bar Chart

Sergey Lukin

• 24333
• 13
• 0

Pure CSS 3D Bar Graph. The 3D effect has been achieved by applying CSS3 transform: rotate(); property on side, back, front, bottom and top panels. Also a background patch (triangle in the bottom left) was used in order to hide the inner bar when it gets lower than it's "depth" angle.. Container has overflow: hidden; so the bar can be lifted up and down by leaving only the part of it visible.

The bar can be moved by only modifying the bottom property of inner bar container: #graphbar. Check out the Github repo.

Related:

• CSS Only Solar System Model
• Minions in pure CSS
• Multiple Box Shadows
• Clicking Game
• CSS3 Room