Übung 3D-Transformationen

dabblet.css

/**
 * Übung 3D-Transformationen
 */

/* Umgebende Box */
.wrapper {
  position: relative;
  height: 480px;
  width: 480px;
  margin: 1em;
  text-align: center;
  display: block;
  perspective: 500px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}

/* Seiten allgemein */
.side {
  box-sizing: border-box;
  position: absolute;
  line-height: 2;
  font-size:100px;
  top: 120px;
  left: 120px;
  height: 240px;
  width: 240px;
  border: 2px solid black;
  color: rgba(0, 0, 0, 0.25);
}

/* Würfel-Seiten */
.side1 {
  transform: translateZ(-120px);
}
.side2 {
  transform: translateY(-120px) rotateX(-90deg);
}
.side3 {
  transform: translateX(-120px) rotateY(90deg);
}
.side4 {
  transform: translateY(120px) rotateX(90deg);
}
.side5 {
  transform: translateX(120px) rotateY(-90deg);
}
.side6 {
  transform: translateZ(120px);
}

/* Innerer Würfel */
.wrapper .wrapper {
  perspective: 0px;
  transform: scale3d(0.5, 0.5, 0.5)
             rotateY(45deg)
             rotateZ(45deg);
}
.wrapper .wrapper .side {
  border-width: 4px;
  opacity: 0.5;
}

dabblet.html

<div class="wrapper">
  <div class="side side1">1</div>
  <div class="side side2">2</div>
  <div class="side side3">3</div>
  <div class="side side4">4</div>
  <div class="side side5">5</div>
  <div class="side side6">6</div>
  <div class="wrapper">
    <div class="side side1">1</div>
    <div class="side side2">2</div>
    <div class="side side3">3</div>
    <div class="side side4">4</div>
    <div class="side side5">5</div>
    <div class="side side6">6</div>
  </div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}