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
 
(8 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;
A hollow, tumbling 3D cube that accepts either a
height: 200px;
global file, or modular wikitext on its 6 faces.
perspective: 600px;
==================================================
margin: 100px;
}


.cube {
USAGE:
width: 100%;
{{3DCube
height: 100%;
| size  =
position: relative;
| image  =
transform-style: preserve-3d;
| front  =
animation: rotatey 5s linear infinite;
| back  =
}
| right  =
| left  =
| top    =
| bottom =
}}
 
PARAMETERS:
- size: Target width/height of the cube in pixels. Defaults to 200.
- image: Convenience parameter. Can be an image, GIF, Audio, or Video (e.g., File.png).
- front, back, right, left, top, bottom: Arbitrary wikitext. Overrides "image".
==================================================
-->
<templatestyles src="Template:3DCube/style.css"/>
<div class="cc-scene" style="perspective: 600px; width: {{{size|200}}}px; height: {{{size|200}}}px;">
    <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-side front" style="transform: rotateY(0deg) translateZ({{#expr: {{{size|200}}} / 2}}px);">
{{{front|{{#if:{{{image|}}}|[[File:{{{image}}}|{{{size|200}}}px]]}}}}}
            </div>
            <div class="cc-side back" style="transform: rotateY(180deg) translateZ({{#expr: {{{size|200}}} / 2}}px);">
{{{back|{{#if:{{{image|}}}|[[File:{{{image}}}|{{{size|200}}}px]]}}}}}
            </div>
            <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]]}}}}}
            </div>
            <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]]}}}}}
            </div>
            <div class="cc-side top" style="transform: rotateX(90deg) translateZ({{#expr: {{{size|200}}} / 2}}px) rotateZ(180deg);">
{{{top|{{#if:{{{image|}}}|[[File:{{{image}}}|{{{size|200}}}px]]}}}}}
            </div>
            <div class="cc-side bottom" style="transform: rotateX(-90deg) translateZ({{#expr: {{{size|200}}} / 2}}px);">
{{{bottom|{{#if:{{{image|}}}|[[File:{{{image}}}|{{{size|200}}}px]]}}}}}
            </div>
           
        </div>
    </div>
</div>
<noinclude>
== Usage ==
Supports standard images, GIFs, Audio files (OGG/MP3), and Videos (MP4).
 
'''Convenience usage (same file on all sides):'''
<pre>
{{3DCube
| size = 200
| image = Some_Video.mp4
}}
</pre>


.cube-face {
'''Mixed content override:'''
position: absolute;
You can set a global file, but override specific sides using wikitext.
width: 200px;
<pre>
height: 200px;
{{3DCube
}
  | size = 200
.flip img {
  | image = Standard_Block.png
transform: scaleX(-1);
| top = <span class="cc-text">TOP</span>
}
| bottom = [[File:Music.ogg]]
.face-front { transform: rotateY(  0deg) translateZ(100px); }
.face-right { transform: rotateY( 90deg) translateZ(100px); }
.face-back  { transform: rotateY(180deg) translateZ(100px); }
.face-left  { transform: rotateY(-90deg) translateZ(100px); }
.face-top    { transform: rotateX( 90deg) translateZ(100px); }
.face-bottom { transform: rotateX(-90deg) translateZ(100px); }
@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">
</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>
[[Category:Formatting templates]]
<div class="cube-face face-back"><div class="flip">[[File:Shit_nobody_cares_about_science_lover.png|200px]]</div></div>
</noinclude>
<div class="cube-face face-right">[[File:Shit_nobody_cares_about_science_lover.png|200px]]</div>
<div class="cube-face face-left">[[File:Shit_nobody_cares_about_science_lover.png|200px]]</div>
<div class="cube-face face-top">[[File:Shit_nobody_cares_about_science_lover.png|200px]]</div>
<div class="cube-face face-bottom">[[File:Shit_nobody_cares_about_science_lover.png|200px]]</div>
</div>
</div>
[[Category:Pages containing a rotating css cube]]

Latest revision as of 21:02, 13 April 2026

Usage

[edit source]

Supports standard images, GIFs, Audio files (OGG/MP3), and Videos (MP4).

Convenience usage (same file on all sides): 

{{3DCube
 | size = 200
 | image = Some_Video.mp4
}}

Mixed content override: You can set a global file, but override specific sides using wikitext. 

{{3DCube
 | size = 200
 | image = Standard_Block.png
 | top = <span class="cc-text">TOP</span>
 | bottom = [[File:Music.ogg]]
}}
Retrieved from "https://www.sncapedia.org/index.php?title=Template:3DCube&oldid=30335"