Advent calendar doors.

dabblet.css

/**
 * Advent calendar doors.
 */
body {
  background: #000;
}

.views-row {
  margin: 1em;
  float: left;
}

.day {  
  perspective: 150px;
  position: relative;
}

.day-inner {
  width: 106px;
  height: 72px;
}

.date {
  color: coral;
  display: block;
  font-family: "Josefin Sans",sans-serif;
  font-size: 2em;
  line-height: 66px;
  text-align: center;
  width: 100px;
}

.visited .date,
.day img {
  display: none;
}

.visited.day img {
  display: block;
}
  
.door {
  border: 1px solid #7f3708;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform-origin: 0 50%;
  transform: rotateY(0deg);
} 

.visited .door {
  background: #7f3708;
  transform-origin: 0 50% 0 50%;
  transform: rotateY(-120deg);
  width: 15%;
}

dabblet.html

<div class="views-row">
<div class="views-view-fields day visited">
  <div class="day-inner">
  <a href="http://www.jonhodges.com/advent/calendar/2013/01">
  <span class="date">1</span>
  <img typeof="foaf:Image" src="http://www.jonhodges.com/advent/sites/default/files/styles/thumbnail/public/01_0.jpg?itok=ApVa6r16" width="100" height="75" alt="" title="The ultimate gift for any aspiring high-rollers">
  </a>
  <div class="door"></div>
  </div>
</div>
</div>
<div class="views-row">
<div class="views-view-fields day">
  <div class="day-inner">
    <a href="http://www.jonhodges.com/advent/calendar/2013/02">
      <span class="date">2</span>
      <img typeof="foaf:Image" src="http://www.jonhodges.com/advent/sites/default/files/styles/thumbnail/public/02_0.jpg?itok=FOmT0j0R" width="100" height="63" alt="Nativity scene on the high street." title="Nativity scene on the high street.">
    </a>
    <div class="door"></div>
    </div>
</div>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}