1812341.html (1731B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <style> 4 .cube figure { 5 position: absolute; 6 backface-visibility: hidden; 7 width: 100%; 8 height: 100% 9 } 10 </style> 11 </head> 12 13 <body style=background-color:#ffffff;overflow:hidden> 14 <div style=width:1504px;height:762px> 15 <div class="cube" style="width:1024px;height:1024px;transform:translate(-50%,-50%) scale(1.46875);perspective:377px;perspective-origin:512px 512px"> 16 <figure class=face0 style="transform:translateZ(377px) rotateX(-0.0823553rad) rotateY(1.79937rad) rotateY(-89.9999deg) translateZ(-511.5px);background: orange"></figure> 17 <figure class=face1 style="transform:translateZ(377px) rotateX(-0.0823553rad) rotateY(1.79937rad) rotateY(0.0001deg) translateZ(-511.5px);background: red"></figure> 18 <figure class=face2 style="transform:translateZ(377px) rotateX(-0.0823553rad) rotateY(1.79937rad) rotateY(89.9999deg) translateZ(-511.5px);background:pink"></figure> 19 <figure class=face3 style="transform:translateZ(377px) rotateX(-0.0823553rad) rotateY(1.79937rad) rotateY(180deg) translateZ(-511.5px);background: yellow"> </figure> 20 <figure class=face4 style="transform:translateZ(377px) rotateX(-0.0823553rad) rotateY(1.79937rad) rotateX(-89.9999deg) translateZ(-511.5px);background: brown"> </figure> 21 <figure class=face5 style="transform:translateZ(377px) rotateX(-0.0823553rad) rotateY(1.79937rad) rotateX(89.9999deg) translateZ(-511.5px);background: green"></figure> 22 </div> 23 </div> 24 </body>