New mission: revamp the portals to make them look actually tolerable to the eye. They are currently placeholders as of now.
The Gold Network: Soyworld | SNCApedia | SoyPlace

I'm not dead, just inactive for the moment. Faggot (talk) 20:16, 9 April 2026 (UTC)

Template:3DCube: Difference between revisions

From SNCApedia, the shit nobody cares about encyclopedia
Jump to navigationJump to search
← Older editNewer edit →
VisualWikitext
No edit summary
heavy rework (a forked version by Clarification needed with a modular thing for it) thanks to him for his contribution
Line 1: Line 1:
<!--
<!--
==================================================
==================================================
TEMPLATE NAME: 3DCube
TEMPLATE NAME: 3DCube
Creates a spinning isometric cube using a 2D matrix
A hollow, tumbling 3D cube that accepts any wikitext
projection (compatible with MediaWiki sanitizers).
(images, text, or templates) on its 6 faces.
==================================================
==================================================


USAGE:
USAGE:
{{3DCube
{{3DCube
  | image  =  
  | size  =  
  | front  =  
  | front  =  
  | back  =  
  | back  =  
| right  =
  | left  =  
  | left  =  
| right  =
  | top    =  
  | top    =  
  | bottom =  
  | bottom =  
| size  =
| link  =
}}
}}


PARAMETERS:
PARAMETERS:
- image: Default filename for all 6 faces (e.g., Example.png).
- front, back, left, right, top, bottom: Override image for a specific face.
- size: Target width/height of the cube in pixels. Defaults to 200.
- size: Target width/height of the cube in pixels. Defaults to 200.
- link: Page to link to when the cube is clicked.
- front, back, right, left, top, bottom: The arbitrary wikitext to display on each side.
- rendering: CSS image-rendering property. Defaults to auto (e.g., pixelated).
==================================================
==================================================
-->
-->
 
<templatestyles src="Template:3DCube/style.css"/>
<templatestyles src="Template:3DCube/style.css" />
<div class="cc-scene" style="perspective: 600px; width: {{{size|200}}}px; height: {{{size|200}}}px;">
<div style="display: inline-block; width: {{{size|200}}}px; height: {{{size|200}}}px; margin: 2em; overflow: visible;">
    <div class="cc-cube" style="transform-style: preserve-3d; transform: translateZ(-{{#expr: {{{size|200}}} / 2}}px) rotate3d(1,0,0,60deg) rotate3d(0,0,1,40deg);">
  <div class="mw-3dcube-scene" style="transform: scale({{#expr: {{{size|200}}} / 200}}); transform-origin: top left; image-rendering: {{{rendering|auto}}};">
        <div class="cc-center" style="transform-style: preserve-3d;">
    <div class="mw-3dcube">
           
      <div class="mw-3dcube-face mw-3dcube-front">
            <div class="cc-side front" style="transform: rotateY(0deg) translateZ({{#expr: {{{size|200}}} / 2}}px);">
        {{#if: {{{front|{{{image|}}}}}} | [[File:{{{front|{{{image}}}}}}|{{{size|200}}}px|link={{{link|}}}]] }}
                {{{front|}}}
      </div>
            </div>
      <div class="mw-3dcube-face mw-3dcube-right">
           
        {{#if: {{{right|{{{image|}}}}}} | [[File:{{{right|{{{image}}}}}}|{{{size|200}}}px|link={{{link|}}}]] }}
            <div class="cc-side back" style="transform: rotateY(180deg) translateZ({{#expr: {{{size|200}}} / 2}}px);">
      </div>
                {{{back|}}}
      <div class="mw-3dcube-face mw-3dcube-back">
            </div>
        {{#if: {{{back|{{{image|}}}}}} | [[File:{{{back|{{{image}}}}}}|{{{size|200}}}px|link={{{link|}}}]] }}
           
      </div>
            <div class="cc-side right" style="transform: rotateY(90deg) translateZ({{#expr: {{{size|200}}} / 2}}px) rotateZ(-90deg);">
      <div class="mw-3dcube-face mw-3dcube-left">
                {{{right|}}}
        {{#if: {{{left|{{{image|}}}}}} | [[File:{{{left|{{{image}}}}}}|{{{size|200}}}px|link={{{link|}}}]] }}
            </div>
      </div>
           
      <div class="mw-3dcube-face mw-3dcube-top">
            <div class="cc-side left" style="transform: rotateY(-90deg) translateZ({{#expr: {{{size|200}}} / 2}}px) rotateZ(90deg);">
        {{#if: {{{top|{{{image|}}}}}} | [[File:{{{top|{{{image}}}}}}|{{{size|200}}}px|link={{{link|}}}]] }}
                {{{left|}}}
      </div>
            </div>
      <div class="mw-3dcube-face mw-3dcube-bottom">
           
        {{#if: {{{bottom|{{{image|}}}}}} | [[File:{{{bottom|{{{image}}}}}}|{{{size|200}}}px|link={{{link|}}}]] }}
            <div class="cc-side top" style="transform: rotateX(90deg) translateZ({{#expr: {{{size|200}}} / 2}}px) rotateZ(180deg);">
      </div>
                {{{top|}}}
    </div>
            </div>
  </div>
           
</div>
            <div class="cc-side bottom" style="transform: rotateX(-90deg) translateZ({{#expr: {{{size|200}}} / 2}}px);">
 
                {{{bottom|}}}
<noinclude>
            </div>
           
        </div>
    </div>  
</div><noinclude>
== Usage ==
== Usage ==
Basic usage with one image for all sides:
Because the template uses transparent walls, make sure any images you use are transparent PNGs or SVGs to get the best "see-through" effect.
<pre>
{{3DCube
| image = Smoboicon.png
}}
</pre>


Customizing sides, size, and rendering:
'''Mixed content example:'''
<pre>
<pre>
{{3DCube
{{3DCube
  | size = 100
  | size = 250
  | rendering = pixelated
  | front = [[File:Transparent_Image.png|200px]]
  | front = Face_Front.png
| back = <span class="cc-text">HELLO<br>WORLD</span>
  | top = Face_Top.png
| left = Just some plain text!
  | image = Face_Generic.png <!-- Fallback for other sides -->
  | right = [[File:Another_Image.png|200px]]
  | top = <span class="cc-text">TOP</span>
  | bottom = <span class="cc-text">BOTTOM</span>
}}
}}
</pre>
</pre>


[[Category:Formatting templates]]
[[Category:Formatting templates]]
[[Category:Pages containing a rotating css cube]]
</noinclude>
</noinclude>

Revision as of 20:18, 13 April 2026

Usage

Because the template uses transparent walls, make sure any images you use are transparent PNGs or SVGs to get the best "see-through" effect.

Mixed content example: 

{{3DCube
 | size = 250
 | front = [[File:Transparent_Image.png|200px]]
 | back = <span class="cc-text">HELLO<br>WORLD</span>
 | left = Just some plain text!
 | right = [[File:Another_Image.png|200px]]
 | top = <span class="cc-text">TOP</span>
 | bottom = <span class="cc-text">BOTTOM</span>
}}
Retrieved from "https://www.sncapedia.org/index.php?title=Template:3DCube&oldid=30316"