3d-cube.html | Explore in Territory

<!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;
  transform-style: preserve-3d;
}

.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>
chromium/third_party/blink/web_tests/compositing/3d-cube.html
