Untitled

dabblet.css

.container{
  font: 10pt arial;
  width: 100%;
  height: 2em;
  -webkit-perspective: 600px;
  -webkit-perspective-origin: 50% 50%;
  position: relative;
}

.bl {
  position: absolute;
  width: 100%;
  height: 2em;
  line-height: 2.em;
  
  -webkit-animation-name: rotate_;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  
  transition-property: transform;
  transition-duration: 700ms;
}

.bl:hover {
  /*transform: rotate3d(1,0,0,180deg);*/
    background: #EEE;
}

.bl:hover .st {
  visibility: visible;
}

@keyframes rotate {
  0% { -webkit-transform: rotate3d(1, 0, 0, 0deg); }
  20% { -webkit-transform: rotate3d(1, 0, 0, 180deg); }
  40% { -webkit-transform: rotate3d(1, 0, 0, 0deg); }
}

.st {
  margin-left: 0.5em;
  margin-right: 0.1em;
  cursor: pointer;
  color: #CCC;
  visibility: hidden;
  font-size: 120%;
}

.st:hover {
  color: #F90;
}

.list {
  width: 300px;
  margin: 0 auto;
}

.bl input {
  margin-right: 0.5em;
}

dabblet.html

<div class="list">
<div class="container">
  <div class="bl">
    <span class="st">☆</span><input type="checkbox"/><label>Do this today!</label>
  </div>
</div>
<div class="container">
  <div class="bl">
    <span class="st">☆</span><input type="checkbox"/><label>Do this today!</label>
  </div>
</div>
</div>

settings.json

{"view":"split-vertical","fontsize":"70","seethrough":"","prefixfree":"1","page":"all"}