Last active
April 17, 2023 07:44
-
-
Save davidaurelio/bdbd6fe2be0dd439569cd75fdd6cb353 to your computer and use it in GitHub Desktop.
Pixel-perfect scale
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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%); } | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// alert('Hello world!'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment