Template:3DCube - Revision history

SomebodyRum at 21:02, 13 April 2026

2026-04-13T21:02:27Z

← Older revision		Revision as of 21:02, 13 April 2026
Line 3:		Line 3:
	TEMPLATE NAME: 3DCube		TEMPLATE NAME: 3DCube
	A hollow, tumbling 3D cube that accepts either a		A hollow, tumbling 3D cube that accepts either a
	global ~~image~~, or modular wikitext on its 6 faces.		global file, or modular wikitext on its 6 faces.
	==================================================		==================================================

Line 20:		Line 20:
	PARAMETERS:		PARAMETERS:
	- size: Target width/height of the cube in pixels. Defaults to 200.		- size: Target width/height of the cube in pixels. Defaults to 200.
	- image: Convenience parameter. ~~A raw filename~~ (e.g., File.png) ~~to display on all 6 sides~~.		- image: Convenience parameter. Can be an image, GIF, Audio, or Video (e.g., File.png).
	- front, back, right, left, top, bottom: Arbitrary wikitext ~~for specific faces~~. Overrides "image".		- front, back, right, left, top, bottom: Arbitrary wikitext. Overrides "image".
	==================================================		==================================================
	-->		-->
Line 29:		Line 29:
	<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]]}}}}}
	</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]]}}}}}
	</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]]}}}}}
	</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]]}}}}}
	</div>		</div>

	<div class="cc-side top" style="transform: rotateX(90deg) translateZ({{#expr: {{{size\|200}}} / 2}}px) rotateZ(180deg);">		<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~~\|frameless\|link=~~]]}}}}}		{{{top\|{{#if:{{{image\|}}}\|[[File:{{{image}}}\|{{{size\|200}}}px]]}}}}}
	</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]]}}}}}
	</div>		</div>

	</div>		</div>
	</div>		</div>
Line 52:		Line 52:
	<noinclude>		<noinclude>
	== Usage ==		== 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.~~		Supports standard images, GIFs, Audio files (OGG/MP3), and Videos (MP4).

	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):'''		'''Convenience usage (same file on all sides):'''
	<pre>		<pre>
	{{3DCube		{{3DCube
	\| size = ~~150~~		\| size = 200
	\| image = ~~Transparent_Image~~.~~png~~		\| image = Some_Video.mp4
	}}		}}
	</pre>		</pre>

	'''Mixed content override:'''		'''Mixed content override:'''
	You can set a global ~~image~~, but override specific sides using wikitext.		You can set a global file, but override specific sides using wikitext.
	<pre>		<pre>
	{{3DCube		{{3DCube
Line 71:		Line 69:
	\| image = Standard_Block.png		\| image = Standard_Block.png
	\| top = <span class="cc-text">TOP</span>		\| top = <span class="cc-text">TOP</span>
	\| bottom = [[File:~~Special_Bottom~~.~~png\|200px\|frameless\|link=~~]]		\| bottom = [[File:Music.ogg]]
	}}		}}
	</pre>		</pre>

SomebodyRum at 20:39, 13 April 2026

2026-04-13T20:39:01Z

← Older revision		Revision as of 20:39, 13 April 2026
Line 29:		Line 29:
	<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=]]}}}}}
	</div>		</div>

	<div class="cc-side top" style="transform: rotateX(90deg) translateZ({{#expr: {{{size\|200}}} / 2}}px) rotateZ(180deg);">		<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\|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>

SomebodyRum: removed useless spacing that caused the image to be a bit offset

2026-04-13T20:37:02Z

removed useless spacing that caused the image to be a bit offset

← Older revision		Revision as of 20:37, 13 April 2026
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>

SomebodyRum at 20:29, 13 April 2026

2026-04-13T20:29:05Z

← Older revision		Revision as of 20:29, 13 April 2026
Line 24:		Line 24:
	==================================================		==================================================
	-->		-->

	<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 class="cc-scene" style="perspective: 600px; width: {{{size\|200}}}px; height: {{{size\|200}}}px;">
Line 31:		Line 30:

	<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]]}}}}}		{{{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]]}}}}}		{{{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]]}}}}}		{{{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]]}}}}}		{{{left\|{{#if:{{{image\|}}}\|[[File:{{{image}}}\|{{{size\|200}}}px\|frameless\|link=]]}}}}}
	</div>		</div>

	<div class="cc-side top" style="transform: rotateX(90deg) translateZ({{#expr: {{{size\|200}}} / 2}}px) rotateZ(180deg);">		<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]]}}}}}		{{{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]]}}}}}		{{{bottom\|{{#if:{{{image\|}}}\|[[File:{{{image}}}\|{{{size\|200}}}px\|frameless\|link=]]}}}}}
	</div>		</div>

Line 57:		Line 56:
	</div>		</div>
	</div>		</div>

	<noinclude>		<noinclude>
	== Usage ==		== 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.		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):'''		'''Convenience usage (same image on all sides):'''
Line 71:		Line 71:

	'''Mixed content override:'''		'''Mixed content override:'''
	You can set a global image, but override specific sides using wikitext.		You can set a global image, but override specific sides using wikitext.
	<pre>		<pre>
	{{3DCube		{{3DCube
	\| size = ~~250~~		\| size = 200
	\| ~~front~~ = ~~[[File:Transparent_Image~~.png~~\|200px]]~~		\| image = Standard_Block.png
	~~\| 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>		\| top = <span class="cc-text">TOP</span>
	\| bottom = ~~<span class~~=~~"cc-text">BOTTOM</span>~~		\| bottom = [[File:Special_Bottom.png\|200px\|frameless\|link=]]
	}}		}}
	</pre>		</pre>

SomebodyRum at 20:20, 13 April 2026

2026-04-13T20:20:14Z

← Older revision		Revision as of 20:20, 13 April 2026
Line 2:		Line 2:
	==================================================		==================================================
	TEMPLATE NAME: 3DCube		TEMPLATE NAME: 3DCube
	A hollow, tumbling 3D cube that accepts ~~any wikitext~~		A hollow, tumbling 3D cube that accepts either a
	~~(images, text~~, or ~~templates)~~ on its 6 faces.		global image, or modular wikitext on its 6 faces.
	==================================================		==================================================

Line 9:		Line 9:
	{{3DCube		{{3DCube
	\| size =		\| size =
			\| image =
	\| front =		\| front =
	\| back =		\| back =
Line 19:		Line 20:
	PARAMETERS:		PARAMETERS:
	- size: Target width/height of the cube in pixels. Defaults to 200.		- size: Target width/height of the cube in pixels. Defaults to 200.
	- front, back, right, left, top, bottom: ~~The arbitrary~~ wikitext ~~to display on each side~~.		- image: Convenience parameter. A raw filename (e.g., File.png) to display on all 6 sides.
			- front, back, right, left, top, bottom: Arbitrary wikitext for specific faces. Overrides "image".
	==================================================		==================================================
	-->		-->

	<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 class="cc-scene" style="perspective: 600px; width: {{{size\|200}}}px; height: {{{size\|200}}}px;">
Line 28:		Line 31:

	<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\|}}}		{{{front\|{{#if:{{{image\|}}}\|[[File:{{{image}}}\|{{{size\|200}}}px]]}}}}}
	</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\|}}}		{{{back\|{{#if:{{{image\|}}}\|[[File:{{{image}}}\|{{{size\|200}}}px]]}}}}}
	</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\|}}}		{{{right\|{{#if:{{{image\|}}}\|[[File:{{{image}}}\|{{{size\|200}}}px]]}}}}}
	</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\|}}}		{{{left\|{{#if:{{{image\|}}}\|[[File:{{{image}}}\|{{{size\|200}}}px]]}}}}}
	</div>		</div>

	<div class="cc-side top" style="transform: rotateX(90deg) translateZ({{#expr: {{{size\|200}}} / 2}}px) rotateZ(180deg);">		<div class="cc-side top" style="transform: rotateX(90deg) translateZ({{#expr: {{{size\|200}}} / 2}}px) rotateZ(180deg);">
	{{{top\|}}}		{{{top\|{{#if:{{{image\|}}}\|[[File:{{{image}}}\|{{{size\|200}}}px]]}}}}}
	</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\|}}}		{{{bottom\|{{#if:{{{image\|}}}\|[[File:{{{image}}}\|{{{size\|200}}}px]]}}}}}
	</div>		</div>

	</div>		</div>
	</div>		</div>
	</div><noinclude>		</div>

			<noinclude>
	== Usage ==		== 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.		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~~:'''		'''Convenience usage (same image on all sides):'''
			<pre>
			{{3DCube
			\| size = 150
			\| image = Transparent_Image.png
			}}
			</pre>

			'''Mixed content override:'''
			You can set a global image, but override specific sides using wikitext.
	<pre>		<pre>
	{{3DCube		{{3DCube

SomebodyRum: heavy rework (a forked version by Clarification needed with a modular thing for it) thanks to him for his contribution

2026-04-13T20:18:02Z

heavy rework (a forked version by Clarification needed with a modular thing for it) thanks to him for his contribution

Show changes

SomebodyRum at 16:42, 12 April 2026

2026-04-12T16:42:28Z

@@ Line 1: / Line 1: @@
 <templatestyles src="Template:3DCube/style.css" />
-<div class="scene">
+<div style="display: inline-block; width: {{{size|200}}}px; height: {{{size|200}}}px; margin: 2em; overflow: visible;">
-   <div class="cube" style="image-rendering: pixelated;">
+   <div class="mw-3dcube-scene" style="transform: scale({{#expr: {{{size|200}}} / 200}}); transform-origin: top left; image-rendering: {{{rendering|auto}}};">
-     <div class="cube-face face-front">[[File:{{{front|{{{image|Shit_nobody_cares_about_science_lover.png}}}}}}|200px|link=]]</div>
+     <div class="mw-3dcube">
-    <div class="cube-face face-right">[[File:{{{right|{{{image|Shit_nobody_cares_about_science_lover.png}}}}}}|200px|link=]]</div>
+      <div class="mw-3dcube-face mw-3dcube-front">
-    <div class="cube-face face-back">[[File:{{{back|{{{image|Shit_nobody_cares_about_science_lover.png}}}}}}|200px|link=]]</div>
+        {{#if: {{{front|{{{image|}}}}}} | [[File:{{{front|{{{image}}}}}}|{{{size|200}}}px|link={{{link|}}}]] }}
-    <div class="cube-face face-left">[[File:{{{left|{{{image|Shit_nobody_cares_about_science_lover.png}}}}}}|200px|link=]]</div>
+      </div>
-    <div class="cube-face face-top">[[File:{{{top|{{{image|Shit_nobody_cares_about_science_lover.png}}}}}}|200px|link=]]</div>
+      <div class="mw-3dcube-face mw-3dcube-right">
-    <div class="cube-face face-bottom">[[File:{{{bottom|{{{image|Shit_nobody_cares_about_science_lover.png}}}}}}|200px|link=]]</div>
+        {{#if: {{{right|{{{image|}}}}}} | [[File:{{{right|{{{image}}}}}}|{{{size|200}}}px|link={{{link|}}}]] }}
    </div>
 </div>

SomebodyRum: my attempt

2026-04-11T18:03:06Z

my attempt

← Older revision		Revision as of 18:03, 11 April 2026
Line 1:		Line 1:
	~~<includeonly>~~<templatestyles src="Template:3DCube/style.css" />		<templatestyles src="Template:3DCube/style.css" />
	<div class="scene">		<div class="scene">
	<div class="cube" style="image-rendering: pixelated;">		<div class="cube" style="image-rendering: pixelated;">
	<div class="cube-face face-front">[[File:{{{front\|{{{image\|Shit_nobody_cares_about_science_lover.png}}}}}}\|200px\|link=]]</div>		<div class="cube-face face-front">[[File:{{{front\|{{{image\|Shit_nobody_cares_about_science_lover.png}}}}}}\|200px\|link=]]</div>
			<div class="cube-face face-right">[[File:{{{right\|{{{image\|Shit_nobody_cares_about_science_lover.png}}}}}}\|200px\|link=]]</div>
	<div class="cube-face face-back">[[File:{{{back\|{{{image\|Shit_nobody_cares_about_science_lover.png}}}}}}\|200px\|link=]]</div>		<div class="cube-face face-back">[[File:{{{back\|{{{image\|Shit_nobody_cares_about_science_lover.png}}}}}}\|200px\|link=]]</div>
	~~<div class="cube-face face-right">[[File:{{{right\|{{{image\|Shit_nobody_cares_about_science_lover.png}}}}}}\|200px\|link=]]</div>~~
	<div class="cube-face face-left">[[File:{{{left\|{{{image\|Shit_nobody_cares_about_science_lover.png}}}}}}\|200px\|link=]]</div>		<div class="cube-face face-left">[[File:{{{left\|{{{image\|Shit_nobody_cares_about_science_lover.png}}}}}}\|200px\|link=]]</div>
			<div class="cube-face face-top">[[File:{{{top\|{{{image\|Shit_nobody_cares_about_science_lover.png}}}}}}\|200px\|link=]]</div>
			<div class="cube-face face-bottom">[[File:{{{bottom\|{{{image\|Shit_nobody_cares_about_science_lover.png}}}}}}\|200px\|link=]]</div>
	</div>		</div>
	</div>		</div>
	~~[[Category:Pages containing a rotating css cube]]</includeonly><noinclude>~~
	~~== Usage ==~~
	~~{{3DCube \| image = Shit_nobody_cares_about_science_lover.png }}~~
	~~</noinclude>~~

SomebodyRum: tried to make it 3D but i guess we'll have this "carousel" illusion

2026-04-11T17:44:00Z

tried to make it 3D but i guess we'll have this "carousel" illusion

@@ Line 1: / Line 1: @@
-testing 3D stuff (could be useful since the scnapedia logo is literally a 3D cube!
+<includeonly><templatestyles src="Template:3DCube/style.css" />
 <div class="scene">
-<div class="cube" style="image-rendering: pixelated;">
+  <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>
+    <div class="cube-face face-front">[[File:{{{front|{{{image|Shit_nobody_cares_about_science_lover.png}}}}}}|200px|link=]]</div>
-<div class="cube-face face-back"><div class="flip">[[File:Shit_nobody_cares_about_science_lover.png|200px]]</div></div>
+    <div class="cube-face face-back">[[File:{{{back|{{{image|Shit_nobody_cares_about_science_lover.png}}}}}}|200px|link=]]</div>
-<div class="cube-face face-right">[[File:Shit_nobody_cares_about_science_lover.png|200px]]</div>
+    <div class="cube-face face-right">[[File:{{{right|{{{image|Shit_nobody_cares_about_science_lover.png}}}}}}|200px|link=]]</div>
-<div class="cube-face face-left">[[File:Shit_nobody_cares_about_science_lover.png|200px]]</div>
+    <div class="cube-face face-left">[[File:{{{left|{{{image|Shit_nobody_cares_about_science_lover.png}}}}}}|200px|link=]]</div>
-<div class="cube-face face-top">[[File:Shit_nobody_cares_about_science_lover.png|200px]]</div>
+  </div>
 </div>
-</div>
+[[Category:Pages containing a rotating css cube]]</includeonly><noinclude>
-[[Category:Pages containing a rotating css cube]]
+== Usage ==

SomebodyRum: testing 3D stuff...

2026-04-11T17:31:09Z

testing 3D stuff...

New page

testing 3D stuff (could be useful since the scnapedia logo is literally a 3D cube!
{{#css:
.scene {
width: 200px;
height: 200px;
perspective: 600px;
margin: 100px;
}

.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: rotatey 5s linear infinite;
}

.cube-face {
position: absolute;
width: 200px;
height: 200px;
}
.flip img {
transform: scaleX(-1);
}
.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">
<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>
<div class="cube-face face-back"><div class="flip">[[File:Shit_nobody_cares_about_science_lover.png|200px]]</div></div>
<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]]

← Older revision		Revision as of 20:39, 13 April 2026
Line 29:		Line 29:
	<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=]]}}}}}
	</div>		</div>

	<div class="cc-side top" style="transform: rotateX(90deg) translateZ({{#expr: {{{size\|200}}} / 2}}px) rotateZ(180deg);">		<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\|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>

← Older revision		Revision as of 20:37, 13 April 2026
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>