"statistics"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/heloisa-biagi/pen/bKArt?depth=everything&order=popularity&page=7&q=statistics&show_forks=false" /> <style class="cp-pen-styles"> * { margin: 0; padding: 0;} body { background: #E4E4E4; height: 450px; } .full { max-width: 700px; position: relative; margin: 0 auto;} .main-title { position: absolute; border-left: solid 5px #333; padding-left: 10px; color: #333; margin: 0 20px 20px 20px; font-family: Impact, serif; font-weight: normal; text-transform: uppercase; line-height: 1; top: 0; } .main-title span { display: block;} .main-title a { color: inherit;} .main-title span { margin-bottom: 0;} .main-title .span1 { font-size: 29px;} .main-title .span2 { font-size: 45px;} .main-title .span3 { font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; text-transform: none; font-weight: normal;} figure { margin: 0;} .container { width: 500px; height: 300px; position: relative; margin: 50px auto; -webkit-perspective: 4000px; -webkit-transform-style: preserve-3d; -moz-perspective: 4000px; -moz-transform-style: preserve-3d; -webkit-animation: rotateChart 20s linear; -webkit-animation-fill-mode: forwards; -moz-animation: rotateChart 20s linear; -moz-animation-fill-mode: forwards; } @-moz-keyframes rotateChart/* Safari and Chrome */ { 0% { -moz-transform: rotateX(0deg) rotateY(-20deg); } 100% { -moz-transform: rotateX(0deg) rotateY(-380deg); } } @-webkit-keyframes rotateChart/* Safari and Chrome */ { 0% { -webkit-transform: rotateX(0deg) rotateY(-20deg); } 100% { -webkit-transform: rotateX(0deg) rotateY(-380deg); } } .persp1, .persp2, .persp3, .persp4, .persp5 { position: absolute; width: 100px; bottom:0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; z-index: 99; } .persp1 { height: 70%;} .persp2 { height: 50%;} .persp3 { height: 35%;} .persp4 { height: 30%;} .persp5 { height: 17%;} .face { position: absolute; } .data-y { background: none!important; font-size: 22px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #FFF; text-align: center; text-shadow: 1px 1px #666; -webkit-transform: translateZ(1px); -moz-transform: translateZ(1px); } .data-x { background-image: url(http://www.heloisabiagi.com/media/charts01-social.png); background-repeat:no-repeat; background-color:#FFF!important; -webkit-transform-origin: top left; -webkit-transform: rotateX(90deg); -moz-transform-origin: top left; -moz-transform: rotateX(90deg); top: 100%; } .persp1 .data-x { background-position: 0px 10px; } .persp2 .data-x { background-position: 0px -90px; } .persp3 .data-x { background-position: 0px -190px; } .persp4 .data-x { background-position: 0px -290px; } .persp5 .data-x { background-position: 0px -390px; } .persp1 { margin-left: 370px;} .persp2 { margin-left: 290px;} .persp3 { margin-left: 210px;} .persp4 { margin-left: 130px;} .persp5 { margin-left: 50px;} /* Faces */ .front, .left, .right, .back { width: 50px; height: 100%; } .top, .data-x, .data-y { width: 50px; height: 50px; } .persp1 .face { background-color: #3B5998; } .persp2 .face { background-color: #20ACFF; } .persp3 .face { background-color: #C53727; } .persp4 .face { background-color: #4393BB; } .persp5 .face { background-color: #DD4B5D; } /* Faces default*/ .front { opacity: 0.7; } .left { -webkit-transform: rotateY(90deg); -webkit-transform-origin: top left; -moz-transform: rotateY(90deg); -moz-transform-origin: top left; opacity: 0.7; } .right { -webkit-transform: rotateY(-90deg); -webkit-transform-origin: top right; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,0.5)), to(transparent)); background-image: -moz-linear-gradient(-90deg, rgba(0,0,0,0.5), transparent); -moz-transform: rotateY(-90deg); -moz-transform-origin: top right; } .top { -webkit-transform-origin:top left; -webkit-transform: rotateX(90deg) translateY(-50px); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.3)), to(rgba(255,255,255,0.5))); -moz-transform-origin:top left; -moz-transform: rotateX(90deg) translateY(-50px); background-image: -moz-linear-gradient(90deg, rgba(255,255,255,0.3), rgba(255,255,255,0.5)); z-index: 99; } .back { -webkit-transform: translateZ(-50px); -moz-transform: translateZ(-50px); } .base { background-color: #FFF; -webkit-transform: rotateX(90deg) translateZ(100px); -moz-transform: rotateX(90deg) translateZ(100px); width: 100%; height: 200px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; border-bottom: solid 3px #CCC; border-right: solid 3px #CCC; } .bars { height: 100%;} .subtitle { position: relative; margin: 0 auto; width: 510px;} .list-social li { font-family: Arial, sans-serif; list-style: none; float: left; margin-right: 10px; } .list-social li:before { content: ''; display: block; float: left; width: 20px; height: 20px; background-color: #F0F; border-radius: 4px; margin-right: 5px; } .list-social li.fb:before { background-color: #3B5998;} .list-social li.twt:before { background-color: #20ACFF;} .list-social li.gp:before { background-color: #C53727;} .list-social li.lkd:before { background-color: #4393BB;} .list-social li.pin:before { background-color: #DD4B5D;} </style></head><body> <div class="full"> <h1 class="main-title"> <span class="span1">Social Media Statistics I:</span> <span class="span2">Number of Users *</span> <span class="span3">(Source: <a href="http://blog.tweetsmarter.com/social-media/spring-2012-social-media-user-statistics/">Tweetsmarter</a> | * in millions)</span> </h1> <div class="container"> <div class="bars"> <div class="persp5"> <figure class="face top"></figure> <figure class="face front"></figure> <figure class="face left"></figure> <figure class="face right"></figure> <figure class="face back"></figure> <div class="face data-y">11.7</div> <div class="face data-x"></div> </div> <div class="persp4"> <figure class="face top"></figure> <figure class="face front"></figure> <figure class="face left"></figure> <figure class="face right"></figure> <figure class="face back"></figure> <div class="face data-y">150</div> <div class="face data-x"></div> </div> <div class="persp3"> <figure class="face top"></figure> <figure class="face front"></figure> <figure class="face left"></figure> <figure class="face right"></figure> <figure class="face back"></figure> <div class="face data-y">170</div> <div class="face data-x"></div> </div> <div class="persp2"> <figure class="face top"></figure> <figure class="face front"></figure> <figure class="face left"></figure> <figure class="face right"></figure> <figure class="face back"></figure> <div class="face data-y">555</div> <div class="face data-x"></div> </div> <div class="persp1"> <figure class="face top"></figure> <figure class="face front"></figure> <figure class="face left"></figure> <figure class="face right"></figure> <figure class="face back"></figure> <div class="face data-y">901</div> <div class="face data-x"></div> </div> </div> <div class="base"></div> </div> <div class="subtitle"> <ul class="list-social"> <li class="fb">Facebook</li> <li class="twt">Twitter</li> <li class="gp">Google Plus</li> <li class="lkd">Linkedin</li> <li class="pin">Pinterest</li> </ul> </div> </body></html>

Related: See More


Questions / Comments: