A Pen by A Non Ymous.

index.html

<ul id="options">
   <!--li><button class="current show-front">Front</button></li-->
   <li><button class="show-right">Today</button></li>
   <li><button class="show-left">Tomorrow</button></li>
   <li><button class="show-top">Now</button></li>
  <li><button class="show-back">About...</button></li>
   <!--li><button class="show-bottom">Bottom</button></li-->
</ul>

<section class="container">
  <div id="box" class="box show-front">
    <figure class="front"><div>World Cup FIFA Brazil 2014 <small>current & closest matches</small></div></figure>
    <figure class="back"><div>There's no &copy;. API by <a href="http://worldcup.sfg.io/" target="_blank">worldcup.sfg.io</a>, cube by <a href="http://codepen.io/wallaceerick/" target="_blank">Wallace Erick</a> and everything else by <a href="http://codepen.io/juanbrujo/" target="_blank">me</a>.</div></figure>
    <figure class="right" id="todayGames"><div></div></figure>
    <figure class="left" id="tomorrowGames"><div></div></figure>
    <figure class="top" id="currentGames"><div></div></figure>
    <figure class="bottom"></figure>
  </div>
</section>

script.js

$('button').click(function(){
  $('ul#options li button').removeClass('current');
  $(this).addClass('current');
});
var init = function() {
  var box = document.querySelector('.box'),
      showPanelButtons = document.querySelectorAll('ul#options li button'),
      panelClassName = 'show-front',
      onButtonClick = function( event ){
        box.removeClassName( panelClassName );
        panelClassName = event.target.className;
        box.addClassName( panelClassName );
      };
  for (var i=0, len = showPanelButtons.length; i < len; i++) {
    showPanelButtons[i].addEventListener( 'click', onButtonClick, false);
  }
  $('toggle-backface-visibility').on( 'click', function(){
    box.toggleClass('panels-backface-invisible');
  }, false);
};
init();

// Get Matches JSON from worldcup.sfg.io
var flagsurl = 'http://img.fifa.com/images/flags/4/';
function currentGames() {
  $.ajax({
    type: "GET",
    url: "http://worldcup.sfg.io/matches/current?by_date=asc",
    crossDomain: !0,
    success: function (a) {
      if (console.log("cGames JSON Proccessed"), a.length > 0)
        for (var e = 0; e < a.length; e++) {
          var t = new Date(a[e].datetime);
          if(a[e].winner !== null) {
          winner = "<p>Winner: " + a[e].winner + "</p>";
        } else {
          winner = '<p>Winner: ?</p>';
        }
          $("#currentGames div").append("<ul><li>" + a[e].home_team.country + ' <img src="'+ flagsurl + a[e].home_team.code + '.png" > ' + a[e].home_team.goals + " &times; " + a[e].away_team.goals + ' <img src="'+ flagsurl + a[e].away_team.code + '.png"> ' + a[e].away_team.country + "</li></ul><p>When: " + t + "</p><p>Where: " + a[e].location + "</p>" + winner + "<button id='currentRefresh'>Refresh</button>")
        } else $("#currentGames div").append("<h3>No  Games Right Now</h3>")
          },
    error: function () {
      console.log("cGames JSON not Proccessed"), $("#currentGames").html("<p>There are no games right now!</p>")
    }
  })
}
function todayGames() {
  $.ajax({
    type: "GET",
    url: "http://worldcup.sfg.io/matches/today?by_date=asc",
    crossDomain: !0,
    success: function (a) {
      console.log("tGames JSON Proccessed");
      for (var e = 0; e < a.length; e++) {
        var t = new Date(a[e].datetime);
        if(a[e].winner !== null) {
          winner = "<p>Winner: " + a[e].winner + "</p>";
        } else {
          winner = '<p></p>';
        }
        $("#todayGames div").append("<ul><li>" + a[e].home_team.country + ' <img src="'+ flagsurl + a[e].home_team.code + '.png" > ' + a[e].home_team.goals + " &times; " + a[e].away_team.goals + ' <img src="'+ flagsurl + a[e].away_team.code + '.png"> ' + a[e].away_team.country + "</li></ul><p>When: " + t + "</p><p>Where: " + a[e].location + "</p>" + winner)
      }
    },
    error: function () {
      console.log("tGames JSON not Proccessed"), $("#todayGames div").html("<p>There are no games today!</p>")
    }
  })
}
function tomorrowGames() {
  $.ajax({
    type: "GET",
    url: "http://worldcup.sfg.io/matches/tomorrow?by_date=asc",
    crossDomain: !0,
    success: function (a) {
      console.log("tmGames JSON Proccessed");
      for (var e = 0; e < a.length; e++) {
        var t = new Date(a[e].datetime);
        if(a[e].winner !== null) {
          winner = "<p>Winner: " + a[e].winner + "</p>";
        } else {
          winner = '<p></p>';
        }
        $("#tomorrowGames div").append("<ul><li>" + a[e].home_team.country + ' <img src="'+ flagsurl + a[e].home_team.code + '.png" > ' + a[e].home_team.goals + " &times; " + a[e].away_team.goals + ' <img src="'+ flagsurl + a[e].away_team.code + '.png"> ' + a[e].away_team.country + "</li></ul><p>When: " + t + "</p><p>Where: " + a[e].location + "</p>" + winner)
      }
    },
    error: function () {
      console.log("tGames JSON not Proccessed"), $("#tomorrowGames div").html("<p>There are no games today!</p>")
    }
  })
}

currentGames(), 
todayGames(),
tomorrowGames()

$('.show-top, #currentRefresh').on('click', function(){
  $('#currentGames > div').empty();
  currentGames();
});

style.less

@box-width: 350px;
@box-height: 350px;
@primary-color: #ecf0f1;
@secundary-color: #2ecc71;
@tertiary-color: #f1c40f;
@quat-color: #2980b9;

//BOX
.container {
  width: @box-width;
  height: @box-height; 
  position: relative;
  top: 50%;
  left: 60%;
  transform: translate(-50%,-50%);
  perspective: 1800px;
}

.box {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 0.5s;
  text-shadow: darken(@secundary-color, 30%) 2px 2px 0;
  

  figure, div {
    position: absolute;  
    text-align: center; 
    color: white;
    margin: 0;
    border-radius: 6px;

    div {
      width: 100%;
      height: 100%;
      overflow: hidden;
      overflow-y: auto;
      font-size: .8rem;
    }
    a {
      color: white;
    }
    h3 { border: white 1px solid; margin: .5rem; }
    ul {
      list-style: none;
      padding: .5rem;
      margin: .5rem;
      border-radius: 4px;
      background-color: darken(@quat-color, 15%);

      li {
        font-size: 1rem;
        
        img {width: 20px;}
      }
    }
    p {
      margin: 0;
      font-size: .7rem;
      padding: 0 .5rem;
      text-align: left;

      &:nth-of-type(3n) {
        /*border: white 1px solid; margin: .5rem;*/
        font-weight: bold;
        font-size: 1rem;
      }
    }
    button {
      outline: none;
      display: block;
      cursor: pointer;
      border: none;
      padding: 5px 10px;
      color: #fff;
      text-transform: uppercase;
      font-size: 11px;
      background: @tertiary-color;
      border-radius: 2px;
      transition: 0.2s;
      font-weight: bold;
      margin: 5px auto;
      text-shadow: darken(@tertiary-color, 20%) 1px 1px 0;

      &:hover {
        background: darken(@tertiary-color, 15%);
      }
      &.current {
        background: darken(@tertiary-color, 30%);
      }
    }
  }
}

//Sizes
.box .front,
.box .back {
  width: @box-width;
  height: @box-height;
} 
.box .right,
.box .left {
  width: @box-width;
  height: @box-height;
} 
.box .top,
.box .bottom {
  width: @box-width;
  height: @box-width;
}

//Positions
.box .right,
.box .left {
  left: @box-width;
} 
.box .top,
.box .bottom {
  top: @box-height;
}

//Colors
.box .front,
.box .back   { background: darken(@secundary-color, 5%);}
.box .right,
.box .left,
.box .top,
.box .bottom { background: @quat-color;}

//Transforms
.box .front  {
  transform: translateZ(@box-height/2);
}
.box .back   {
  transform: rotateX(-180deg) translateZ(@box-height/2);
}
.box .right  {
  transform: rotateY(90deg) translateZ(-@box-width/2);
    }
.box .left {
  transform: rotateY(-90deg) translateZ(@box-width*1.5);
}
.box .top {
  transform: rotateX(90deg) translateZ(@box-height*1.5);
}
.box .bottom {
  transform: rotateX(-90deg) translateZ(-@box-height/2);
    }

//Show Specific Face
.box.show-front {
  transform: translateZ(@box-height/2);
}
.box.show-back {
  transform: translateZ(@box-height/2) rotateX(-180deg);
}
.box.show-right {
  transform: translateZ(@box-width/2) rotateY(-90deg);
}
.box.show-left {
  transform: translateZ(@box-width/2) rotateY(90deg);
}
.box.show-top {
  transform: translateZ(@box-height/2) rotateX(-90deg); 
}
.box.show-bottom {
  transform: translateZ(@box-height/2) rotateX(90deg);
}

//Buttons
#options {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  list-style: none;
  padding: 0;

  li {
    margin-bottom: 5px;

    button {
      outline: none;
      display: block;
      cursor: pointer;
      border: none;
      padding: 10px 20px;
      color: #fff;
      text-transform: uppercase;
      font-size: 14px;
      background: @tertiary-color;
      border-radius: 2px;
      transition: 0.2s;
      font-weight: bold;
      text-shadow: darken(@tertiary-color, 20%) 2px 2px 0;

      &:hover {
        background: darken(@tertiary-color, 15%);
      }
      &.current {
        background: darken(@tertiary-color, 30%);
      }
    }
  }
}

.front {
  display: table;

  div {
    font-weight: bold;
    font-size: 2.2rem!important;
    line-height: 120%;
    display: table-cell;
    vertical-align: middle;
    position: static;
    

    small {
      display: block;
      font-size: .8rem!important;
      font-weight: normal;
      border: 1px solid white;
      margin: 1rem 3rem;
    }
  }
}
.back {
  display: table;

  div {
    padding: 2rem;
    width: 80%!important;
    height: 80%!important;
    display: table-cell;
    vertical-align: middle;
    position: static;
  }
}
// GENERAL STYLE
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
html, body {height: 100%;}
body {
  background: @primary-color;
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  overflow: hidden;
}

World-Cup-FIFA-Brazil-2014:-current-&-closest-matches.markdown

World Cup FIFA Brazil 2014: current & closest matches

API by worldcup.sfg.io, cube by Wallace Erick and everything else by me

Forked from Jorge Epuñan's Pen World Cup FIFA Brazil 2014: current & closest matches.

A Pen by A Non Ymous on CodePen.

License.