3D Animated Bar Chart CSS3

.graph-container { position:relative; display:inline-block; padding:0; list-style:none; margin:40px 0 0 40px; font-size:0.8em; background:#fff; background-position:0 -2.5em; }
.graph-container:before { position:absolute; content:""; bottom:0; left:-1.25em; width:100%; height:2.5em; background-color:#999;
-webkit-transform:skew(-45deg); -moz-transform:skew(-45deg); -o-transform:skew(-45deg); -ms-transform:skew(-45deg); transform:skew(-45deg); }
.graph-container:after { position:absolute; content:""; top:1.25em; left:-2.5em; width:2.5em; background-color:#888; -webkit-transform:skew(0deg, -45deg);
-moz-transform:skew(0deg, -45deg); -o-transform:skew(0deg, -45deg); -ms-transform:skew(0deg, -45deg); transform:skew(0deg, -45deg); }
.graph-container > li { float:left; position:relative; } .graph-container > li:nth-last-child(2) { margin-right:2.5em; }
.graph-container > li > span { position:absolute; left:0; bottom:-2em; font-size:12px; }
.graph-container > li:last-child { width:100%; position:absolute; left:0; bottom:0; }
.graph-marker-container > li { position:absolute; left:-2.5em; bottom:0; width:100%; margin-bottom:2.5em; list-style:none; }
.graph-marker-container > li:before, .graph-marker-container > li:after { content:""; position:absolute; border-style:none none dotted; border-color:rgba(100, 100, 100, .15);
border-width:0 0 .15em; background:rgba(133, 133, 133, .15); }
.graph-marker-container > li:before { width:3.55em; height:0; bottom:-1.22em; left:-.55em; z-index:2; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); }
.graph-marker-container li:after { width:100%; bottom:0; left:2.5em; }
.graph-marker-container span { position:absolute; font-weight:bold; text-shadow:1px 1px 1px rgba(255,255,255,0.7); top:1em; left:-3.5em; width:3.5em; font-size:12px; }
.bar-wrapper { overflow:hidden; } .bar-container { position:relative; margin-top:2.5em; width:50px;}
.bar-container:before { content:""; position:absolute; z-index:3; bottom:0; right:0; width:0; height:0; border-style:solid; border-width:0 0 2.5em 2.5em;
border-color:transparent transparent #999; }
.bar-background { width:10em; height:100%; position:absolute; top:-2.5em; left:2.5em; z-index:1; }
.bar-background:before, .bar-background:after { content:""; position:absolute; }
.bar-background:before { bottom:-2.5em; right:1.25em; width:10em; height:2.5em; -webkit-backface-visibility:hidden; -webkit-transform:skew(-45deg);
-moz-transform:skew(-45deg); -o-transform:skew(-45deg); -ms-transform:skew(-45deg); transform:skew(-45deg); }
.bar-background:after { top:1.25em; right:10em; width:2.5em; height:100%; -webkit-backface-visibility:hidden;
-webkit-transform:skew(0deg, -45deg); -moz-transform:skew(0deg, -45deg); -o-transform:skew(0deg, -45deg); -ms-transform:skew(0deg, -45deg); transform:skew(0deg, -45deg); }
.bar-foreground { z-index:3; }
.bar-foreground, .bar-inner { position:absolute; width:18px; height:100%; top:0; left:0; }
.bar-foreground:before, .bar-foreground:after, .bar-inner:before, .bar-inner:after { content:""; position:absolute; }
.bar-foreground:before, .bar-inner:before { top:-1.25em; right:-2.5em; width:2.5em; height:100%; background-color:rgba(15, 15, 15, .25);
-webkit-transform:skew(0deg, -45deg); -moz-transform:skew(0deg, -45deg); -o-transform:skew(0deg, -45deg); -ms-transform:skew(0deg, -45deg); transform:skew(0deg, -45deg); }
.bar-foreground:after, .bar-inner:after { top:-2.5em; right:-1.25em; width:100%; height:2.5em; background-color:rgba(5, 5, 5, .2); -webkit-transform:skew(-45deg);
-moz-transform:skew(-45deg); -o-transform:skew(-45deg); -ms-transform:skew(-45deg); transform:skew(-45deg); }
.bar-inner { z-index:2; top:auto; background-color:rgba(5, 62, 123, .6); height:0;
bottom:-2.5em; color:transparent; -webkit-transition:height 0.8s ease-out, bottom 0.8s ease-out;
-moz-transition:height 0.8s ease-out, bottom 0.8s ease-out; -o-transition:height 0.8s ease-out, bottom 0.8s ease-out;
-ms-transition:height 0.8s ease-out, bottom 0.8s ease-out; transition:height 0.8s ease-out, bottom 0.8s ease-out; }
.bar-inner:before { background-color:rgba(5, 62, 123, .6); } .bar-inner:after { background-color:rgba(47, 83, 122, .7); }
input[name^="fill-"] { width:65px; height:25px; position:absolute; opacity:0; cursorointer; z-index:100; }
input[name^="fill-"] + label { display:inline-block; margin:0px; width:65px; padding:0px 6px; color:#777; line-height:20px; font-size:13px;
text-shadow:1px 1px 1px #fff; border:1px solid #fff; background:#ffffff; background:-moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed));
background:-webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); background:-o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background:-ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background:linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); box-shadow:0px 1px 1px rgba(0,0,0,0.3); }
input[name^="fill-"]:checked + label { background:rgba(34, 35, 36, .7); border-color:#333; color:#fff; text-shadow:none; box-shadow:0px 1px 1px rgba(255,255,255, 0.4); }
input#f-none:checked ~ .graph-container > li:nth-child(1) .bar-inner { height:0; bottom:-2.5em; }
input#f-none:checked ~ .graph-container > li:nth-child(2) .bar-inner { height:0; bottom:-2.5em; }
input#f-none:checked ~ .graph-container > li:nth-child(3) .bar-inner { height:0; bottom:-2.5em; }
input#f-product1:checked ~ .graph-container > li:nth-child(1) .bar-inner { height:25%; bottom:0; }
input#f-product1:checked ~ .graph-container > li:nth-child(2) .bar-inner { height:50%; bottom:0; }
input#f-product1:checked ~ .graph-container > li:nth-child(3) .bar-inner { height:75%; bottom:0; }
input#f-product2:checked ~ .graph-container > li:nth-child(1) .bar-inner { height:50%; bottom:0; }
input#f-product2:checked ~ .graph-container > li:nth-child(2) .bar-inner { height:100%; bottom:0; }
input#f-product2:checked ~ .graph-container > li:nth-child(3) .bar-inner { height:25%; bottom:0; }
input#f-product3:checked ~ .graph-container > li:nth-child(1) .bar-inner { height:25%; bottom:0; }
input#f-product3:checked ~ .graph-container > li:nth-child(2) .bar-inner { height:75%; bottom:0; }
input#f-product3:checked ~ .graph-container > li:nth-child(3) .bar-inner { height:100%; bottom:0; }
input[name^="paint-"] { width:25px; height:25px; position:absolute; opacity:0; cursorointer; z-index:100; }
input[name^="paint-"] + label { color:#989da4; font-weight:bold; text-decoration:none; display:inline-block; width:25px; height:25px; overflow:hidden;
background:rgba(34, 35, 36, .7);/*#171b20;*/ margin:0 2px -7px; position:relative; cursorointer; color:transparent;
box-shadow:0 0 0 2px rgba(255,255,255,0.1), 1px 1px 3px rgba(0,0,0,0.3); text-align:center; }
input[name^="resize-"] { position:absolute; opacity:0; cursorointer; z-index:100; width:70px; height:35px; z-index:100; }
input[name^="resize-"] + label { color:#fff; display:inline-block; background:rgba(183, 172, 172, .7); width:70px; line-height:35px; height:35px;
text-align:center; position:relative; }
input[name^="resize-"]:checked + label { background:rgba(34, 35, 36, .7); color:#fff; box-shadow:0px 1px 1px rgba(255,255,255,0.3); }
input#graph-small:checked ~ .graph-container .bar-container, input#graph-small:checked ~ .graph-container:after,
input#graph-small:checked ~ .graph-container > li:last-child { height:10em; }
input#graph-normal:checked ~ .graph-container .bar-container, input#graph-normal:checked ~ .graph-container:after, input#graph-normal:checked ~ .graph-container > li:last-child
{ height:10em; }
.graph-container > li .bar-container { margin-right:1.5em; }
.graph-container > li:first-child { margin-left:1.5em; }
.graph-container > li:nth-last-child(2) .bar-container { margin-right:1em; }
.bar-background { background-color:rgba(160, 160, 160, .1); }
.bar-background:before { background-color:rgba(160, 160, 160, .2); }
.bar-background:after { background-color:rgba(160, 160, 160, .05); }
.bar-foreground { background-color:rgba(160, 160, 160, .1); }
.button-label{ font-weight:bold; color:#aaa; line-height:40px; text-shadow:1px 1px 1px rgba(255,255,255,0.; display:inline; margin:0 10px 0 20px; }
.button-label:before { content:" "; white-space:wrap; }
.main span:first-of-type{ margin-left:0px; }

<div class="container">
<section class="main">
<input type="radio" name="resize-graph" id="graph-normal" checked="checked" />
<input type="radio" name="paint-graph" id="graph-blue" checked="checked" />
<input type="radio" name="fill-graph" id="f-none" />
<label for="f-none">0/0/0</label>
<input type="radio" name="fill-graph" id="f-product1" checked="checked" /><label for="f-product1">25/50/75</label>
<input type="radio" name="fill-graph" id="f-product2" /><label for="f-product2">50/100/20</label>
<input type="radio" name="fill-graph" id="f-product3" /><label for="f-product3">25/75/100</label>
<div style="clear:both;"></div>
<ul class="graph-container" style="margin-left:100px;">
<li><span>2011</span>
<div class="bar-wrapper"><div class="bar-container"><div class="bar-background"></div><div class="bar-inner">25</div><div class="bar-foreground"></div></div></div></li>
<li><span>2012</span>
<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></li>
<li><span>2013</span>
<div class="bar-wrapper"><div class="bar-container"><div class="bar-background"></div><div class="bar-inner">75</div><div class="bar-foreground"></div></div></div></li>
<li>
<ul class="graph-marker-container">
<li style="bottom:25%;"><span>25%</span></li><li style="bottom:50%;"><span>50%</span></li>
<li style="bottom:75%;"><span>75%</span></li><li style="bottom:100%;"><span>100%</span></li>
</ul>
</li>
</ul>
</section>
</div>

Tagged in:

• css3 animation
• 3D graph css3
• animated graph css3
• 3d bar chart