The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */

div {
  height: 150px;
  width: 150px;
  transition: all 500ms ease;
}
.container {
  perspective: 500px;
  border: 1px solid black;
}
.transformed {
  /*transform: rotateY(50deg);*/
  background-color: blue;
}
.child {
  transform-origin: top left;
  
  /*transform: rotateX(40deg);*/
  background-color: lime;
}
.transformed:hover {
  transform: rotateY(50deg);
}
.child:hover {
  transform: rotateX(70deg);
}

dabblet.html

<div class="container">
  <div class="transformed">
      <div class="child"></div>
  </div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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