Template:3DCube: Difference between revisions
From SNCApedia, the shit nobody cares about encyclopedia
Jump to navigationJump to search
SomebodyRum (talk | contribs) No edit summary |
SomebodyRum (talk | contribs) m removed useless spacing that caused the image to be a bit offset |
||
| Line 28: | Line 28: | ||
<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="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="cc-center" style="transform-style: preserve-3d;"> | <div class="cc-center" style="transform-style: preserve-3d;"> | ||
<div class="cc-side front" style="transform: rotateY(0deg) translateZ({{#expr: {{{size|200}}} / 2}}px);"> | <div class="cc-side front" style="transform: rotateY(0deg) translateZ({{#expr: {{{size|200}}} / 2}}px);"> | ||
{{{front|{{#if:{{{image|}}}|[[File:{{{image}}}|{{{size|200}}}px|frameless|link=]]}}}}} | {{{front|{{#if:{{{image|}}}|[[File:{{{image}}}|{{{size|200}}}px|frameless|link=]]}}}}} | ||
</div> | </div> | ||
<div class="cc-side back" style="transform: rotateY(180deg) translateZ({{#expr: {{{size|200}}} / 2}}px);"> | <div class="cc-side back" style="transform: rotateY(180deg) translateZ({{#expr: {{{size|200}}} / 2}}px);"> | ||
{{{back|{{#if:{{{image|}}}|[[File:{{{image}}}|{{{size|200}}}px|frameless|link=]]}}}}} | {{{back|{{#if:{{{image|}}}|[[File:{{{image}}}|{{{size|200}}}px|frameless|link=]]}}}}} | ||
</div> | </div> | ||
<div class="cc-side right" style="transform: rotateY(90deg) translateZ({{#expr: {{{size|200}}} / 2}}px) rotateZ(-90deg);"> | <div class="cc-side right" style="transform: rotateY(90deg) translateZ({{#expr: {{{size|200}}} / 2}}px) rotateZ(-90deg);"> | ||
{{{right|{{#if:{{{image|}}}|[[File:{{{image}}}|{{{size|200}}}px|frameless|link=]]}}}}} | {{{right|{{#if:{{{image|}}}|[[File:{{{image}}}|{{{size|200}}}px|frameless|link=]]}}}}} | ||
</div> | </div> | ||
<div class="cc-side left" style="transform: rotateY(-90deg) translateZ({{#expr: {{{size|200}}} / 2}}px) rotateZ(90deg);"> | <div class="cc-side left" style="transform: rotateY(-90deg) translateZ({{#expr: {{{size|200}}} / 2}}px) rotateZ(90deg);"> | ||
{{{left|{{#if:{{{image|}}}|[[File:{{{image}}}|{{{size|200}}}px|frameless|link=]]}}}}} | {{{left|{{#if:{{{image|}}}|[[File:{{{image}}}|{{{size|200}}}px|frameless|link=]]}}}}} | ||
| Line 48: | Line 44: | ||
{{{top|{{#if:{{{image|}}}|[[File:{{{image}}}|{{{size|200}}}px|frameless|link=]]}}}}} | {{{top|{{#if:{{{image|}}}|[[File:{{{image}}}|{{{size|200}}}px|frameless|link=]]}}}}} | ||
</div> | </div> | ||
<div class="cc-side bottom" style="transform: rotateX(-90deg) translateZ({{#expr: {{{size|200}}} / 2}}px);"> | <div class="cc-side bottom" style="transform: rotateX(-90deg) translateZ({{#expr: {{{size|200}}} / 2}}px);"> | ||
{{{bottom|{{#if:{{{image|}}}|[[File:{{{image}}}|{{{size|200}}}px|frameless|link=]]}}}}} | {{{bottom|{{#if:{{{image|}}}|[[File:{{{image}}}|{{{size|200}}}px|frameless|link=]]}}}}} | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
Revision as of 20:37, 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.
- Note: If you are setting custom images using the face parameters (like `|front=`), make sure to add `|frameless|link=` to your file syntax to prevent the wiki from adding a default white background to the image!*
Convenience usage (same image on all sides):
{{3DCube
| size = 150
| image = Transparent_Image.png
}}
Mixed content override: You can set a global image, but override specific sides using wikitext.
{{3DCube
| size = 200
| image = Standard_Block.png
| top = <span class="cc-text">TOP</span>
| bottom = [[File:Special_Bottom.png|200px|frameless|link=]]
}}
