| <!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 face111 side1"></div> |
| <div class="face face112 side1"></div> |
| <div class="face face113 side1"></div> |
| <div class="face face121 side1"></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 face321 side3"></div> |
| <div class="face face322 side3"></div> |
| <div class="face face323 side3"></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 face513 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 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> |
