Template:Tesseract CSS
Jump to navigation
Jump to search
The tesseract-cell-* classes are for the cube facets of the tesseract; however, only the cells along the xw-plane are available.
Each cell preserves the 3d effect of its descendants (the original tesseract uses nonrotating css cube faces).
The ridge-* classes are for the square faces of the tesseract, and correspond to the Rotating CSS Cube's cube-face face-* classes.
Example usage:
{{#css:
.ridge-front img, .ridge-back img, .ridge-right img, .ridge-left img, .ridge-top img, .ridge-bottom img {
opacity: 0.125;
}
}}
<div class="scene">
<div class="tesseract">
<div class="tesseract-cell-front">
<div style="position: absolute;">[[File:Niko2.png|200px]]</div>
<div class="ridge-front" style="background-color: #75A3;">[[File:Niko2.png|200px]]</div>
<div class="ridge-back" style="background-color: #5423;">[[File:Niko2.png|200px]]</div>
<div class="ridge-right" style="background-color: #0C33;">[[File:Niko2.png|200px]]</div>
<div class="ridge-left" style="background-color: #1B73;">[[File:Niko2.png|200px]]</div>
<div class="ridge-top" style="background-color: #0453;">[[File:Niko2.png|200px]]</div>
<div class="ridge-bottom" style="background-color: #5333;">[[File:Niko2.png|200px]]</div>
</div>
<div class="tesseract-cell-right">
<div style="position: absolute;">[[File:Niko2.png|200px]]</div>
<div class="ridge-front" style="background-color: #0473;">[[File:Niko2.png|200px]]</div>
<div class="ridge-back" style="background-color: #FD23;">[[File:Niko2.png|200px]]</div>
<div class="ridge-top" style="background-color: #7B33;">[[File:Niko2.png|200px]]</div>
<div class="ridge-bottom" style="background-color: #0F43;">[[File:Niko2.png|200px]]</div>
</div>
<div class="tesseract-cell-back">
<div style="position: absolute;">[[File:Niko2.png|200px]]</div>
<div class="ridge-front" style="background-color: #34E3;">[[File:Niko2.png|200px]]</div>
<div class="ridge-back" style="background-color: #3E93;">[[File:Niko2.png|200px]]</div>
<div class="ridge-right" style="background-color: #A6B3;">[[File:Niko2.png|200px]]</div>
<div class="ridge-left" style="background-color: #4103;">[[File:Niko2.png|200px]]</div>
<div class="ridge-top" style="background-color: #F983;">[[File:Niko2.png|200px]]</div>
<div class="ridge-bottom" style="background-color: #EAD3;">[[File:Niko2.png|200px]]</div>
</div>
<div class="tesseract-cell-left">
<div style="position: absolute;">[[File:Niko2.png|200px]]</div>
<div class="ridge-front" style="background-color: #F853;">[[File:Niko2.png|200px]]</div>
<div class="ridge-back" style="background-color: #13D3;">[[File:Niko2.png|200px]]</div>
<div class="ridge-top" style="background-color: #FE93;">[[File:Niko2.png|200px]]</div>
<div class="ridge-bottom" style="background-color: #E8E3;">[[File:Niko2.png|200px]]</div>
</div>
</div>
</div>
Produces:
