Ajax Loader
×

Pure CSS 3D Bar Chart

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:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Pure CSS 3D Bar Chart

    CSSDeck G+