<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>
