Pixel-perfect scale

dabblet.css

/**
 * Pixel-perfect scale
 */
 
.frame {
	position: relative;
	margin: 48px;
} 

.rocketship {
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAAAAAAABupgeRAAABt0lEQVR4AWOgPrh78dKi7UdKV15t2v6kavpOfErvnDgxOb+43d1v7aSZC09dX3bjY1DDGpyqLx440JmSJa+hJ8/AdKm98/3vr4v3Hi3sX4td9alLV9d2T46WkhdlYGgUE3t3YM+t5/fL6muxq941Z0njurP59ROn+gTv8PB8uWTBuduXZi+eW93YiFD0bfWqH8FB3729duvqR+VNtuo+4dq5c9ZOoMF3D18+M33BrMyCfITqX5cufjVU+8/H8oWZoUZQUil9tnXnkZyNT5ccPLlzx+yJMybFpaWhuOFns9//WK4fbszHraX9Td18Jx0tW3tldd3EhoQq26xGv4hoFNVf93f+2yL7f7nIq5XpkzqbgzLqK2bt6IpKqbP1kvcr1vIvxBmO727Oq+6KMfMITZGQmiwsYqtul69oiFP1+6vT/34offakqMJedYmf6RZnwytMLG81NbGrfn1u7ZdrVv/+Tjw6JWxjgcHFZe03tNT/MzJ81MalYW/B/19O399knphuA/JVg/9/YYZvfLwfmxqxa3izTPP7dtXn2+Mh3P9TXd85qX/Ztg2nB17snYjMfXVwKZ4UCQAMSsgcb3SdewAAAABJRU5ErkJggg==) no-repeat;
	width: 16px;
	height: 16px;
	position: absolute;
	transform-origin: 0 0;
}

.rs1 {
    zoom: 3;
}

.rs2 {
	transform: scale(3);
	left: 96px;
}

.rs3 {
    transform: scale(3);
    image-rendering: pixelated;
 	left: 192px;
}

.rs4 {
    transform: scale(3);
    image-rendering: crisp-edges;
 	left: 288px;
}

@keyframes bgcol {      
	     0% { background-color: hsl(60, 75%, 95%); }
    33.333% { background-color: hsl(180, 75%, 95%); }
    66.667% { background-color: hsl(300, 75%, 95%); }
       100% { background-color: hsl(420, 75%, 95%); }
}

body {
  animation: bgcol 5s infinite linear;
}

dabblet.html

<div class=frame>
	<div class="rocketship rs1"></div>
	<div class="rocketship rs2"></div>
	<div class="rocketship rs3"></div>
	<div class="rocketship rs4"></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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