Pixel-perfect scale

dabblet.css

/**
 * Pixel-perfect scale
 */
 
 html {
 	font: 1em sans-serif;
 }
 
 form {
 	user-select: none;
 }
 
 form:has(input[name=preserve-3d]:checked) + .frame {
	transform-style: preserve-3d;
 }
 
.frame {
	position: relative;
	padding: 48px;
	perspective: 200px;
	transform: perspective(1000px) rotateX(0.1turn) translateX(20px);
	height: 48px;
	width: 340px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 20px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  	animation: bgcol 5s infinite linear;
} 

.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;
    image-rendering: pixelated;
	width: 16px;
	height: 16px;
	position: absolute;
	transform-origin: 0 0;
}

.rs1 {
    zoom: 3;
}
.rs1::after {
	content: "zoom";
	display: block;
	zoom: 0.33333;
	margin-top: 60px;
}

.rs2, .rs3, .rs4 {
	transform: scale(3);
	left: 144px;
}
.rs2::after {
	content: "scale";
	display: block;
	transform: scale(0.33333) translate(-15px, 42px);
}

.rs3 {
	left: 240px;
}
.rs4 {
	left: 336px;
}

@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%); }
}

dabblet.html

<form>
	<label>
		<input type=checkbox name=preserve-3d checked>
		Use <code>transform-style: preserve-3d</code>
	</label>
</form>

<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"}