Untitled

dabblet.css

input:checked ~ .wrap {
  animation: 1s turn;
  animation-fill-mode: forwards;
  }

@keyframes turn {
  to {
    transform: rotate(.25turn);
    }
  }

.wrap {
  height: 200px;
  width: 200px;
  background: #222;
  color: white;
  line-height: 200px;
  text-align: center;
  border-radius: 50%;
  }

dabblet.html

<input type='radio' name="turn" id="one"/>
<input type='radio' name="turn" id="two"/>
<input type='radio' name="turn" id="three"/>
<input type='radio' name="turn" id="four"/>

<div class="wrap">
  ajklajd
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}