9,942
edits
Changes
Jump to navigation
Jump to search
no edit summary
Line 41:
Line 41:
<div class="cube-face face-bottom"></div>
<div class="cube-face face-bottom"></div>
</div>
</div>
+</div>
+{{#css:
+.scene {
+width: 200px;
+height: 200px;
+perspective: 600px;
+margin: 100px;
+}
+
+.cube {
+width: 100%;
+height: 100%;
+position: relative;
+transform-style: preserve-3d;
+animation: rotatey 5s linear infinite;
+}
+
+.cube-face {
+position: absolute;
+width: 200px;
+height: 200px;
+}
+.face-front { transform: rotateY( 0deg) translateZ(100px); background-color: rgba(255, 0, 0, 0.5); }
+.face-right { transform: rotateY( 90deg) translateZ(100px); background-color: rgba(255, 255, 0, 0.5); }
+.face-back { transform: rotateY(180deg) translateZ(100px); background-color: rgba(0, 255, 0, 0.5); }
+.face-left { transform: rotateY(-90deg) translateZ(100px); background-color: rgba(0, 255, 255, 0.5); }
+.face-top { transform: rotateX( 90deg) translateZ(100px); background-color: rgba(0, 0, 255, 0.5); }
+.face-bottom { transform: rotateX(-90deg) translateZ(100px); background-color: rgba(255, 0, 255, 0.5); }
+@keyframes rotatey {
+0% { transform: rotate3d(0, 0, 1, 0deg); }
+100% { transform: rotate3d(1, 0, 1, 360deg); }
+}
+/* most of the css was taken from https://3dtransforms.desandro.com/cube */
+}}
+<div class="scene">
+ <div class="cube">
+ <div class="cube-face face-front">{{Dia|Statler|Sometimes I feel like I'm boxed in.}}</div>
+ <div class="cube-face face-back">{{Dia|Waldorf|Finally, they made a three-dimensional character!}}</div>
+ <div class="cube-face face-right">{{Dia|Statler|Guess you really are a blockhead!}}</div>
+ <div class="cube-face face-left">{{Dia|Waldorf|Hey, it's hip to be square!}}</div>
+ <div class="cube-face face-top">{{Dia|Statler|I heard of being two-faced, but you're six-faced!}}</div>
+ <div class="cube-face face-bottom">{{Dia|SWLaugh|Oh ho ho ho!}}</div>
+ </div>
</div>
</div>