<!DOCTYPE HTML> <style> .face { width: 100px; height: 100px; position: absolute; font-size: 50px; line-height: 100px; text-align: center; transform-origin: 151px 151px -153px; } .mini-cube { width: 100px; height: 100px; } .area { position: relative; left: 30%; width: 40%; height: 300px; padding-top: 200px; transform-style: preserve-3d; transform: rotateX(-30deg) rotateY(45deg); perspective: 500px; } .face111 { } .face112 { transform: translateX(101px); } .face113 { transform: translateX(202px); } .face121 { transform: translateY(101px); } .face122 { transform: translateX(101px) translateY(101px); } .face123 { transform: translateX(202px) translateY(101px); } .face131 { transform: translateY(202px); } .face132 { transform: translateX(101px) translateY(202px); } .face133 { transform: translateX(202px) translateY(202px); } .face211 { transform: rotateY(-90deg); } .face212 { transform: rotateY(-90deg) translateX(101px); } .face213 { transform: rotateY(-90deg) translateX(202px); } .face221 { transform: rotateY(-90deg) translateY(101px); } .face222 { transform: rotateY(-90deg) translateX(101px) translateY(101px); } .face223 { transform: rotateY(-90deg) translateX(202px) translateY(101px); } .face231 { transform: rotateY(-90deg) translateY(202px); } .face232 { transform: rotateY(-90deg) translateX(101px) translateY(202px); } .face233 { transform: rotateY(-90deg) translateX(202px) translateY(202px); } .face311 { transform: rotateX(90deg); } .face312 { transform: rotateX(90deg) translateX(101px); } .face313 { transform: rotateX(90deg) translateX(202px); } .face321 { transform: rotateX(90deg) translateY(101px); } .face322 { transform: rotateX(90deg) translateX(101px) translateY(101px); } .face323 { transform: rotateX(90deg) translateX(202px) translateY(101px); } .face331 { transform: rotateX(90deg) translateY(202px); } .face332 { transform: rotateX(90deg) translateX(101px) translateY(202px); } .face333 { transform: rotateX(90deg) translateX(202px) translateY(202px); } .face411 { transform: rotateX(-90deg); } .face412 { transform: rotateX(-90deg) translateX(101px); } .face413 { transform: rotateX(-90deg) translateX(202px); } .face421 { transform: rotateX(-90deg) translateY(101px); } .face422 { transform: rotateX(-90deg) translateX(101px) translateY(101px); } .face423 { transform: rotateX(-90deg) translateX(202px) translateY(101px); } .face431 { transform: rotateX(-90deg) translateY(202px); } .face432 { transform: rotateX(-90deg) translateX(101px) translateY(202px); } .face433 { transform: rotateX(-90deg) translateX(202px) translateY(202px); } .face511 { transform: rotateY(90deg); } .face512 { transform: rotateY(90deg) translateX(101px); } .face513 { transform: rotateY(90deg) translateX(202px); } .face521 { transform: rotateY(90deg) translateY(101px); } .face522 { transform: rotateY(90deg) translateX(101px) translateY(101px); } .face523 { transform: rotateY(90deg) translateX(202px) translateY(101px); } .face531 { transform: rotateY(90deg) translateY(202px); } .face532 { transform: rotateY(90deg) translateX(101px) translateY(202px); } .face533 { transform: rotateY(90deg) translateX(202px) translateY(202px); } .face611 { transform: rotateY(-180deg); } .face612 { transform: rotateY(-180deg) translateX(101px); } .face613 { transform: rotateY(-180deg) translateX(202px); } .face621 { transform: rotateY(-180deg) translateY(101px); } .face622 { transform: rotateY(-180deg) translateX(101px) translateY(101px); } .face623 { transform: rotateY(-180deg) translateX(202px) translateY(101px); } .face631 { transform: rotateY(-180deg) translateY(202px); } .face632 { transform: rotateY(-180deg) translateX(101px) translateY(202px); } .face633 { transform: rotateY(-180deg) translateX(202px) translateY(202px); } .side1 { background-color: orange; } .side2 { background-color: red; } .side3 { background-color: yellow; } .side4 { background-color: blue; } .side5 { background-color: green; } .side6 { background-color: cyan; } </style> <body> <div class="area"> <div class="mini-cube"> <div class="face face112 side1"></div> <div class="face face113 side1"></div> <div class="face face121 side1"></div> <div class="face face513 side5"></div> <div class="face face122 side1"></div> <div class="face face123 side1"></div> <div class="face face131 side1"></div> <div class="face face132 side1"></div> <div class="face face133 side1"></div> <div class="face face211 side2"></div> <div class="face face212 side2"></div> <div class="face face213 side2"></div> <div class="face face221 side2"></div> <div class="face face222 side2"></div> <div class="face face223 side2"></div> <div class="face face231 side2"></div> <div class="face face232 side2"></div> <div class="face face233 side2"></div> <div class="face face311 side3"></div> <div class="face face312 side3"></div> <div class="face face313 side3"></div> <div class="face face322 side3"></div> <div class="face face323 side3"></div> <div class="face face111 side1"></div> <div class="face face331 side3"></div> <div class="face face332 side3"></div> <div class="face face333 side3"></div> <div class="face face411 side4"></div> <div class="face face412 side4"></div> <div class="face face413 side4"></div> <div class="face face421 side4"></div> <div class="face face422 side4"></div> <div class="face face423 side4"></div> <div class="face face431 side4"></div> <div class="face face432 side4"></div> <div class="face face433 side4"></div> <div class="face face511 side5"></div> <div class="face face512 side5"></div> <div class="face face521 side5"></div> <div class="face face522 side5"></div> <div class="face face523 side5"></div> <div class="face face531 side5"></div> <div class="face face321 side3"></div> <div class="face face532 side5"></div> <div class="face face533 side5"></div> <div class="face face611 side6"></div> <div class="face face612 side6"></div> <div class="face face613 side6"></div> <div class="face face621 side6"></div> <div class="face face622 side6"></div> <div class="face face623 side6"></div> <div class="face face631 side6"></div> <div class="face face632 side6"></div> <div class="face face633 side6"></div> </div> </div> </body>