1<!doctype html> 2<html lang="en" itemscope itemtype="https://schema.org/Article"> 3<head> 4 <meta charset="utf-8"> 5 <title>CSS Voxels Chicken - Leandro Linares</title> 6 <meta name="viewport" content="width=device-width"> 7 <meta name="theme-color" content="#fff"> 8 <meta name="description" content="Each voxel is one HTML element with three faces. Voxels are stacked in layers along the z-axis."> 9 <link rel="icon" href="/favicon.gif"> 10 <link rel="apple-touch-icon" href="/apple-touch-icon.png"> 11 <link rel="manifest" href="/manifest.json"> 12 <link rel="alternate" href="/feed.xml" type="application/rss+xml" title="Leandro Linares"> 13 <link rel="stylesheet" href="/styles.css"> 14 <link rel="canonical" href="https://leandrolinares.com/dev/css-voxels-chicken/"> 15 16 <meta itemprop="mainEntityOfPage" content="https://leandrolinares.com/dev/css-voxels-chicken/"> 17 <meta itemprop="inLanguage" content="en"> 18 <meta itemprop="image" content="https://leandrolinares.com/thumbnails/crossy-road.png"> 19 <meta name="twitter:site" content="@lean8086"> 20 <meta name="twitter:url" content="https://leandrolinares.com/dev/css-voxels-chicken/"> 21 <meta name="twitter:title" content="CSS Voxels"> 22 <meta name="twitter:description" content="Each voxel is one HTML element with three faces. Voxels are stacked in layers along the z-axis."> 23 <meta name="twitter:creator" content="@lean8086"> 24 <meta name="twitter:card" content="summary_large_image"> 25 <meta name="twitter:image" content="https://leandrolinares.com/thumbnails/crossy-road.png"> 26 <meta property="og:title" content="CSS Voxels"> 27 <meta property="og:type" content="article"> 28 <meta property="og:url" content="https://leandrolinares.com/dev/css-voxels-chicken/"> 29 <meta property="og:description" content="Each voxel is one HTML element with three faces. Voxels are stacked in layers along the z-axis."> 30 <meta property="og:site_name" content="Leandro Linares"> 31 <meta property="og:image" content="https://leandrolinares.com/thumbnails/crossy-road.png"> 32 33 <style> 34 .experiment-workspace .context { 35 perspective: 99999px; 36 transform-style: preserve-3d; 37 transform: rotateX(70deg) rotateZ(45deg); 38 width: 200px; 39 height: 100px; 40 background: rgba(0, 0, 0, .03); 41 } 42 43 .experiment-workspace .layer { 44 display: flex; 45 flex-wrap: wrap; 46 position: absolute; 47 transform-style: preserve-3d; 48 } 49 50 .experiment-workspace em { 51 width: 10px; 52 height: 10px; 53 display: block; 54 } 55 56 .experiment-workspace b, 57 .experiment-workspace b::before, 58 .experiment-workspace b::after { 59 width: 10px; 60 height: 10px; 61 } 62 63 .experiment-workspace b { 64 transform-style: preserve-3d; 65 transform: translateZ(10px); 66 display: flex; 67 } 68 69 .experiment-workspace b::before, 70 .experiment-workspace b::after { 71 position: absolute; 72 content: ""; 73 background: inherit; 74 } 75 76 .experiment-workspace b::before { 77 filter: brightness(90%); 78 } 79 80 [data-face-y="front"] b::before { 81 transform: rotateX(90deg); 82 transform-origin: bottom; 83 } 84 85 [data-face-y="back"] b::before { 86 transform: rotateX(-90deg); 87 transform-origin: top; 88 } 89 90 .experiment-workspace b::after { 91 filter: brightness(80%); 92 } 93 94 [data-face-x="right"] b::after { 95 transform: rotateY(-90deg); 96 transform-origin: right; 97 } 98 99 [data-face-x="left"] b::after { 100 transform: rotateY(90deg); 101 transform-origin: left; 102 } 103 104 [data-face-y="none"] b::before, 105 [data-face-x="none"] b::after { 106 content: none; 107 } 108 109 .experiment-workspace { 110 height: 500px; 111 display: flex; 112 align-items: center; 113 justify-content: center; 114 background-color: #69ceec; 115 } 116 117 .experiment-workspace .rangeZ { 118 position: absolute; 119 top: 30px; 120 } 121 122 </style> 123</head> 124 125<body> 126 <header class="header" role="banner"> 127 <a class="header__logo pixelated" href="/">Leandro's Web Site</a> 128 </header> 129 130 <header class="entry-head"> 131 <h1 class="entry-head__headline" itemprop="headline">CSS Voxels</h1> 132 <p class="entry-head__details"><time datetime="2019-02-16" itemprop="dateCreated">February 16, 2019</time> by <a href="/" itemprop="author">Leandro Linares</a></p> 133 <p class="entry-head__description" itemprop="description">Each voxel is one HTML element with three faces. Voxels are stacked in layers along the z-axis.</p> 134 </header> 135 136 <main class="experiment-workspace"> 137 <input type="range" class="rangeZ" min="0" max="360" value="45"/> 138 139 <div class="context" data-face-x="right" data-face-y="front"></div> 140 </main> 141 142 <footer class="footer" role="contentinfo"><a href="/">Leandro Linares</a></footer> 143 144
144<script> 145 const test = { 146 "width": 10, 147 "height": 14, 148 "palette": [ 149 [0, 0, 0, 0], 150 [255, 128, 103, 1], 151 [255, 255, 255, 1], 152 [255, 93, 147, 1], 153 [0, 0, 0, 1] 154 ], 155 "data": [ 156 [ 157 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 158 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 159 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 160 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 161 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 162 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 163 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 164 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 165 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 166 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 167 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 168 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 169 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 170 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 171 ], 172 [ 173 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 174 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 175 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 176 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 177 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 178 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 179 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 180 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 181 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 182 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 183 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 184 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 185 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 186 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 187 ], 188 [ 189 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 190 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 191 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 192 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 193 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 194 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 195 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 196 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 197 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 198 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 199 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 200 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 201 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 202 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 203 ], 204 [ 205 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 206 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 207 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 208 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 209 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 210 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 211 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 212 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 213 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 214 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 215 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 216 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 217 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 218 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 219 ], 220 [ 221 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 222 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 223 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 224 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 225 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 226 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 227 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 228 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 229 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 230 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 231 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 232 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 233 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 234 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 235 ], 236 [ 237 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 238 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 239 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 240 2, 2, 0, 0, 0, 0, 0, 0, 2, 2, 241 2, 2, 0, 0, 0, 0, 0, 0, 2, 2, 242 2, 2, 0, 0, 0, 0, 0, 0, 2, 2, 243 2, 2, 0, 0, 0, 0, 0, 0, 2, 2, 244 2, 2, 0, 0, 0, 0, 0, 0, 2, 2, 245 2, 2, 0, 0, 0, 0, 0, 0, 2, 2, 246 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 247 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 248 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 249 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 250 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 251 ], 252 [ 253 0, 0, 0, 2, 2, 2, 2, 0, 0, 0, 254 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 255 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 256 2, 2, 0, 0, 0, 0, 0, 0, 2, 2, 257 2, 2, 0, 0, 0, 0, 0, 0, 2, 2, 258 2, 2, 0, 0, 0, 0, 0, 0, 2, 2, 259 2, 2, 0, 0, 0, 0, 0, 0, 2, 2, 260 2, 2, 0, 0, 0, 0, 0, 0, 2, 2, 261 2, 2, 0, 0, 0, 0, 0, 0, 2, 2, 262 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 263 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 264 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 265 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 266 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 267 ], 268 [ 269 0, 0, 0, 2, 2, 2, 2, 0, 0, 0, 270 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 271 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 272 2, 2, 0, 0, 0, 0, 0, 0, 2, 2, 273 2, 2, 0, 0, 0, 0, 0, 0, 2, 2, 274 2, 2, 0, 0, 0, 0, 0, 0, 2, 2, 275 2, 2, 0, 0, 0, 0, 0, 0, 2, 2, 276 2, 2, 0, 0, 0, 0, 0, 0, 2, 2, 277 2, 2, 0, 0, 0, 0, 0, 0, 2, 2, 278 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 279 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 280 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 281 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 282 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 283 ], 284 [ 285 0, 0, 0, 2, 2, 2, 2, 0, 0, 0, 286 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 287 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 288 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 289 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 290 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 291 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 292 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 293 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 294 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 295 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 296 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 297 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 298 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 299 ], 300 [ 301 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 302 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 303 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 304 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 305 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 306 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 307 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 308 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 309 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 310 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 311 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 312 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 313 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 314 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 315 ], 316 [ 317 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 318 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 319 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 320 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 321 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 322 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 323 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 324 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 325 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 326 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 327 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 328 0, 0, 0, 0, 3, 3, 0, 0, 0, 0, 329 0, 0, 0, 0, 3, 3, 0, 0, 0, 0, 330 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 331 ], 332 [ 333 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 334 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 335 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 336 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 337 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 338 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 339 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 340 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 341 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 342 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 343 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 344 0, 0, 0, 0, 3, 3, 0, 0, 0, 0, 345 0, 0, 0, 0, 3, 3, 0, 0, 0, 0, 346 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 347 ], 348 [ 349 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 350 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 351 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 352 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 353 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 354 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 355 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 356 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 357 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 358 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 359 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 360 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 361 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 362 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 363 ], 364 [ 365 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 366 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 367 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 368 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 369 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 370 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 371 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 372 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 373 0, 0, 4, 0, 0, 0, 0, 4, 0, 0, 374 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 375 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 376 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 377 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 378 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 379 ], 380 [ 381 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 382 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 383 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 384 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 385 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 386 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 387 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 388 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 389 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 390 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 391 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 392 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 393 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 394 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 395 ], 396 [ 397 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 398 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 399 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 400 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 401 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 402 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 403 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 404 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 405 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 406 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 407 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 408 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 409 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 410 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 411 ], 412 [ 413 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 414 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 415 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 416 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 417 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 418 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 419 0, 0, 0, 0, 3, 3, 0, 0, 0, 0, 420 0, 0, 0, 0, 3, 3, 0, 0, 0, 0, 421 0, 0, 0, 0, 3, 3, 0, 0, 0, 0, 422 0, 0, 0, 0, 3, 3, 0, 0, 0, 0, 423 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 424 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 425 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 426 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 427 ], 428 [ 429 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 430 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 431 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 432 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 433 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 434 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 435 0, 0, 0, 0, 3, 3, 0, 0, 0, 0, 436 0, 0, 0, 0, 3, 3, 0, 0, 0, 0, 437 0, 0, 0, 0, 3, 3, 0, 0, 0, 0, 438 0, 0, 0, 0, 3, 3, 0, 0, 0, 0, 439 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 440 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 441 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 442 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 443 ] 444 ] 445 }; 446 447 const context = document.querySelector('.context'); 448 context.style.width = `${test.width * 10}px`; 449 context.style.height = `${test.height * 10}px`; 450 451 setTimeout(function () { 452 test.data.forEach((layer, layerIndex) => { 453 const el = document.createElement('div'); 454 el.className = 'layer'; 455 el.style.transform = `translateZ(${layerIndex * 10}px)`; 456 layer.forEach(color => { 457 if (test.palette[color][3] < 0) { 458 const empty = document.createElement('em'); 459 el.appendChild(empty); 460 } else { 461 const voxel = document.createElement('b'); 462 voxel.style.background = `rgba(${test.palette[color].join(',')})` 463 el.appendChild(voxel); 464 } 465 }); 466 context.appendChild(el); 467 }); 468 }, 3000) 469 transformContext({ context, z: document.querySelector('.rangeZ').value }); 470 471 document.querySelector('.rangeZ').addEventListener('input', function () { 472 transformContext({ context, z: this.value }); 473 const [faceX, faceY] = calcFaces(this.value); 474 context.setAttribute('data-face-x', faceX); 475 context.setAttribute('data-face-y', faceY); 476 }); 477 478 function transformContext({ context, z }) { 479 context.style.transform = `rotateX(70deg) rotateZ(${z}deg) translateZ(${test.data.length * -5}px)`; 480 } 481 482 function calcFaces(z) { 483 // Default faces to none in case Z = 0, 180, etc. 484 let fX = 'none'; 485 let fY = 'none'; 486 if (z > 0) { 487 if (z < 180) { 488 fX = 'right'; 489 if (z < 90) { 490 fY = 'front'; 491 } else if (z > 90) { 492 fY = 'back'; 493 } 494 } else if (z > 180) { 495 fX = 'left'; 496 if (z < 270) { 497 fY = 'back'; 498 } else if (z > 270) { 499 fY = 'front'; 500 } 501 } else { 502 fY = 'back'; 503 } 504 } else if (z < 0) { 505 if (z > -180) { 506 fX = 'left'; 507 if (z > -90) { 508 fY = 'front'; 509 } else if (z < -90) { 510 fY = 'back'; 511 } 512 } else if (z < -180) { 513 fX = 'right'; 514 if (z > -270) { 515 fY = 'back'; 516 } else if (z < -270) { 517 fY = 'front'; 518 } 519 } 520 } else { 521 fY = 'front'; 522 } 523 return [fX, fY]; 524 } 525 526 </script>
526 527</body> 528</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.