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
VisualWikitext
testing 3D stuff...
 
No edit summary
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
testing 3D stuff (could be useful since the scnapedia logo is literally a 3D cube!
<!--
{{#css:
==================================================
.scene {
TEMPLATE NAME: 3DCube
width: 200px;
Creates a spinning isometric cube using a 2D matrix
height: 200px;
projection (compatible with MediaWiki sanitizers).
perspective: 600px;
==================================================
margin: 100px;
}


.cube {
USAGE:
width: 100%;
{{3DCube
height: 100%;
| image  =
position: relative;
| front  =
transform-style: preserve-3d;
| back  =
animation: rotatey 5s linear infinite;
| left  =
}
| right  =
| top    =
| bottom =
| size  =
| link  =
}}


.cube-face {
PARAMETERS:
position: absolute;
- image: Default filename for all 6 faces (e.g., Example.png).
width: 200px;
- front, back, left, right, top, bottom: Override image for a specific face.
height: 200px;
- size: Target width/height of the cube in pixels. Defaults to 200.
}
- link: Page to link to when the cube is clicked.
.flip img {
- rendering: CSS image-rendering property. Defaults to auto (e.g., pixelated).
transform: scaleX(-1);
==================================================
}
-->
.face-front { transform: rotateY(  0deg) translateZ(100px); }
 
.face-right { transform: rotateY( 90deg) translateZ(100px); }
<templatestyles src="Template:3DCube/style.css" />
.face-back   { transform: rotateY(180deg) translateZ(100px); }
<div style="display: inline-block; width: {{{size|200}}}px; height: {{{size|200}}}px; margin: 2em; overflow: visible;">
.face-left   { transform: rotateY(-90deg) translateZ(100px); }
  <div class="mw-3dcube-scene" style="transform: scale({{#expr: {{{size|200}}} / 200}}); transform-origin: top left; image-rendering: {{{rendering|auto}}};">
.face-top   { transform: rotateX( 90deg) translateZ(100px); }
    <div class="mw-3dcube">
.face-bottom { transform: rotateX(-90deg) translateZ(100px); }
      <div class="mw-3dcube-face mw-3dcube-front">
@keyframes rotatey {
        {{#if: {{{front|{{{image|}}}}}} | [[File:{{{front|{{{image}}}}}}|{{{size|200}}}px|link={{{link|}}}]] }}
0% { transform: rotate3d(0, 0, 1, 0deg); }
      </div>
100% { transform: rotate3d(1, 0, 1, 360deg); }
      <div class="mw-3dcube-face mw-3dcube-right">
}
        {{#if: {{{right|{{{image|}}}}}} | [[File:{{{right|{{{image}}}}}}|{{{size|200}}}px|link={{{link|}}}]] }}
/* most of the css was taken from https://3dtransforms.desandro.com/cube */
      </div>
      <div class="mw-3dcube-face mw-3dcube-back">
        {{#if: {{{back|{{{image|}}}}}} | [[File:{{{back|{{{image}}}}}}|{{{size|200}}}px|link={{{link|}}}]] }}
      </div>
      <div class="mw-3dcube-face mw-3dcube-left">
        {{#if: {{{left|{{{image|}}}}}} | [[File:{{{left|{{{image}}}}}}|{{{size|200}}}px|link={{{link|}}}]] }}
      </div>
      <div class="mw-3dcube-face mw-3dcube-top">
        {{#if: {{{top|{{{image|}}}}}} | [[File:{{{top|{{{image}}}}}}|{{{size|200}}}px|link={{{link|}}}]] }}
      </div>
      <div class="mw-3dcube-face mw-3dcube-bottom">
        {{#if: {{{bottom|{{{image|}}}}}} | [[File:{{{bottom|{{{image}}}}}}|{{{size|200}}}px|link={{{link|}}}]] }}
      </div>
    </div>
  </div>
</div>
 
<noinclude>
== Usage ==
Basic usage with one image for all sides:
<pre>
{{3DCube
| image = Smoboicon.png
}}
}}
<div class="scene">
</pre>
<div class="cube" style="image-rendering: pixelated;">
 
<div class="cube-face face-front"><div class="flip">[[File:Shit_nobody_cares_about_science_lover.png|200px]]</div></div>
Customizing sides, size, and rendering:
<div class="cube-face face-back"><div class="flip">[[File:Shit_nobody_cares_about_science_lover.png|200px]]</div></div>
<pre>
<div class="cube-face face-right">[[File:Shit_nobody_cares_about_science_lover.png|200px]]</div>
{{3DCube
<div class="cube-face face-left">[[File:Shit_nobody_cares_about_science_lover.png|200px]]</div>
| size = 100
<div class="cube-face face-top">[[File:Shit_nobody_cares_about_science_lover.png|200px]]</div>
| rendering = pixelated
<div class="cube-face face-bottom">[[File:Shit_nobody_cares_about_science_lover.png|200px]]</div>
| front = Face_Front.png
</div>
| top = Face_Top.png
</div>
| image = Face_Generic.png <!-- Fallback for other sides -->
}}
</pre>
 
[[Category:Formatting templates]]
[[Category:Pages containing a rotating css cube]]
[[Category:Pages containing a rotating css cube]]
</noinclude>

Latest revision as of 16:42, 12 April 2026



Usage

[edit source]

Basic usage with one image for all sides: 

{{3DCube
 | image = Smoboicon.png
}}

Customizing sides, size, and rendering: 

{{3DCube
 | size = 100
 | rendering = pixelated
 | front = Face_Front.png
 | top = Face_Top.png
 | image = Face_Generic.png <!-- Fallback for other sides -->
}}
Retrieved from "https://www.sncapedia.org/index.php?title=Template:3DCube&oldid=30130"