Animated 3D Bar Chart with CSS3

It all began with a small experiment which shows a way how to embed a 3D bar chart into HTML pages using CSS, images and JavaScript. After reading the tutorial Sergey Lukin challenged himself to turn this idea into pure CSS and see how far he can take it. The initial challenge was to create a classic semi-transparent 3D box with 6 sides. The final challenge was to create a complete 3D bar chart which he will create in this tutorial.

The planning phase is the most important part of any project. So let’s make a plan. Before actually coding, Sergey Lukin usually writes down all potential challenges with solutions he can think of in a specific project and repeat this process until he gets something that looks like a strategy that can be executed. Here is the list of challenges with solutions Sergey Lukin came up with for this project:

• Challenge 1 – A bar with movable inner block
• Challenge 2 – The Graph Holder