Template:2DSpinCube/style.css - Revision history

SomebodyRum at 18:33, 11 April 2026

2026-04-11T18:33:19Z

← Older revision		Revision as of 18:33, 11 April 2026
Line 3:		Line 3:
	width: 200px;		width: 200px;
	height: 200px;		height: 200px;
	margin: ~~100px~~ auto;		/* Changed from 100px to 20px to remove dead space */
			margin: 20px auto;
	position: relative;		position: relative;
			/* This ensures the container doesn't expand beyond the cube */
			overflow: visible;
	}		}

Line 19:		Line 22:
	top: 0;		top: 0;
	left: 0;		left: 0;
	~~/* No background/border so transparency works */~~
	animation: cube2d-spin 8s linear infinite;		animation: cube2d-spin 8s linear infinite;
	}		}

			/* Offsetting the 4 walls */
	.cube2d-front { animation-delay: 0s; }		.cube2d-front { animation-delay: 0s; }
	.cube2d-right { animation-delay: -2s; }		.cube2d-right { animation-delay: -2s; }
Line 28:		Line 31:
	.cube2d-left { animation-delay: -6s; }		.cube2d-left { animation-delay: -6s; }

	/* ~~Top and bottom are hidden because they don't work in this 2D~~ projection */		/* 16-step projection */
	~~.cube2d-top, .cube2d-bottom { display: none; }~~

	@keyframes cube2d-spin {		@keyframes cube2d-spin {
	0% { transform: translateX(0px) scaleX(1); z-index: 4; }		0% { transform: translateX(0px) scaleX(1); z-index: 4; }
Line 42:		Line 43:
	50% { transform: translateX(0px) scaleX(-1); z-index: 1; }		50% { transform: translateX(0px) scaleX(-1); z-index: 1; }
	56.25% { transform: translateX(-38.3px) scaleX(-0.924); z-index: 1; }		56.25% { transform: translateX(-38.3px) scaleX(-0.924); z-index: 1; }
	62.5% { transform: translateX(-70.7px) scaleX(-0.707); z-index: 2; }		62.5% { transform: translateX(-70.7px) scaleX(-0.707); z-index: 1; }
	68.75% { transform: translateX(-92.4px) scaleX(-0.383); z-index: 2; }		68.75% { transform: translateX(-92.4px) scaleX(-0.383); z-index: 2; }
	75% { transform: translateX(-100px) scaleX(0); z-index: 3; }		75% { transform: translateX(-100px) scaleX(0); z-index: 2; }
	81.25% { transform: translateX(-92.4px) scaleX(0.383); z-index: 3; }		81.25% { transform: translateX(-92.4px) scaleX(0.383); z-index: 3; }
	87.5% { transform: translateX(-70.7px) scaleX(0.707); z-index: 4; }		87.5% { transform: translateX(-70.7px) scaleX(0.707); z-index: 3; }
	93.75% { transform: translateX(-38.3px) scaleX(0.924); z-index: 4; }		93.75% { transform: translateX(-38.3px) scaleX(0.924); z-index: 4; }
	100% { transform: translateX(0px) scaleX(1); z-index: 4; }		100% { transform: translateX(0px) scaleX(1); z-index: 4; }
	}		}

SomebodyRum at 18:16, 11 April 2026

2026-04-11T18:16:32Z

← Older revision		Revision as of 18:16, 11 April 2026
Line 1:		Line 1:
	/* Template:2DSpinCube/style.css */		/* Template:2DSpinCube/style.css */
	.scene {		.cube2d-scene {
	width: 200px;		width: 200px;
	height: 200px;		height: 200px;
	margin: 100px auto;		margin: 100px auto;
	position: relative;		position: relative;
	}		}

	.~~cube~~ {		.cube2d-container {
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
	position: relative;		position: relative;
	}		}

	.~~cube~~-face {		.cube2d-face {
	position: absolute;		position: absolute;
	width: 200px;		width: 200px;
	height: 200px;		height: 200px;
	top: 0;		top: 0;
	left: 0;		left: 0;
	/* ~~Animation applied to all faces~~ */		/* No background/border so transparency works */
	animation: ~~fake3D~~ 8s linear infinite;		animation: cube2d-spin 8s linear infinite;
	}		}

	~~/* Offsetting faces for the horizontal spin */~~		.cube2d-front { animation-delay: 0s; }
	.~~face~~-front { animation-delay: 0s; }		.cube2d-right { animation-delay: -2s; }
	.~~face~~-right { animation-delay: -2s; }		.cube2d-back { animation-delay: -4s; }
	.~~face~~-back { animation-delay: -4s; }		.cube2d-left { animation-delay: -6s; }
	.~~face~~-left { animation-delay: -6s; }

	/* ~~Hide top/~~bottom ~~since we~~ are ~~only doing horizontal spin~~ */		/* Top and bottom are hidden because they don't work in this 2D projection */
	.~~face~~-top, .~~face~~-bottom {		.cube2d-top, .cube2d-bottom { display: none; }
	display: none;
	}

	~~/* 16-step projection */~~		@keyframes cube2d-spin {
	@keyframes ~~fake3D~~ {		0% { transform: translateX(0px) scaleX(1); z-index: 4; }
	0% { transform: translateX(0px) scaleX(1); z-index: 4; }		6.25% { transform: translateX(38.3px) scaleX(0.924); z-index: 4; }
	12.5% { transform: translateX(70.7px) scaleX(0.707); z-index: 4; }		12.5% { transform: translateX(70.7px) scaleX(0.707); z-index: 4; }
	25% { transform: translateX(100px) scaleX(0); z-index: 3; }		18.75% { transform: translateX(92.4px) scaleX(0.383); z-index: 3; }
	37.5% { transform: translateX(70.7px) scaleX(-0.707); z-index: 2; }		25% { transform: translateX(100px) scaleX(0); z-index: 3; }
	50% { transform: translateX(0px) scaleX(-1); z-index: 1; }		31.25% { transform: translateX(92.4px) scaleX(-0.383); z-index: 2; }
	62.5% { transform: translateX(-70.7px) scaleX(-0.707); z-index: 2; }		37.5% { transform: translateX(70.7px) scaleX(-0.707); z-index: 2; }
	75% { transform: translateX(-100px) scaleX(0); z-index: 3; }		43.75% { transform: translateX(38.3px) scaleX(-0.924); z-index: 1; }
	87.5% { transform: translateX(-70.7px) scaleX(0.707); z-index: 4; }		50% { transform: translateX(0px) scaleX(-1); z-index: 1; }
	100% { transform: translateX(0px) scaleX(1); z-index: 4; }		56.25% { transform: translateX(-38.3px) scaleX(-0.924); z-index: 1; }
			62.5% { transform: translateX(-70.7px) scaleX(-0.707); z-index: 2; }
			68.75% { transform: translateX(-92.4px) scaleX(-0.383); z-index: 2; }
			75% { transform: translateX(-100px) scaleX(0); z-index: 3; }
			81.25% { transform: translateX(-92.4px) scaleX(0.383); z-index: 3; }
			87.5% { transform: translateX(-70.7px) scaleX(0.707); z-index: 4; }
			93.75% { transform: translateX(-38.3px) scaleX(0.924); z-index: 4; }
			100% { transform: translateX(0px) scaleX(1); z-index: 4; }
	}		}

SomebodyRum at 18:15, 11 April 2026

2026-04-11T18:15:55Z

← Older revision		Revision as of 18:15, 11 April 2026
Line 1:		Line 1:
	/* Template:2DSpinCube/style.css */		/* Template:2DSpinCube/style.css */
	.scene {		.scene {
	width: 200px;		width: 200px;
	height: 200px;		height: 200px;
	margin: 100px auto;		margin: 100px auto;
	position: relative;		position: relative;
	}		}

	.cube {		.cube {
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
	position: relative;		position: relative;
	}		}

	.cube-face {		.cube-face {
	position: absolute;		position: absolute;
	width: 200px;		width: 200px;
	height: 200px;		height: 200px;
	top: 0;		top: 0;
	left: 0;		left: 0;
	/* ~~This animation mathematically projects 3D rotation into 2D space~~ */		/* Animation applied to all faces */
	animation: fake3D 8s linear infinite;		animation: fake3D 8s linear infinite;
	}		}

	/* Offsetting the ~~start times creates the 4 sides of the 3D box~~ */		/* Offsetting faces for the horizontal spin */
	.face-front { animation-delay: 0s; }		.face-front { animation-delay: 0s; }
	.face-right { animation-delay: -2s; }		.face-right { animation-delay: -2s; }
	.face-back { animation-delay: -4s; }		.face-back { animation-delay: -4s; }
	.face-left { animation-delay: -6s; }		.face-left { animation-delay: -6s; }

	/* ~~16-step sine~~/~~cosine projection to simulate flawless 3D spinning~~ */		/* Hide top/bottom since we are only doing horizontal spin */
	~~@keyframes fake3D {~~		.face-top, .face-bottom {
	~~0% { transform: translateX(0px) scaleX(1); z-index: 4; }~~		display: none;
	6.~~25% { transform: translateX(38.3px) scaleX(0.924); z~~-~~index: 4; }~~
	~~12.5% { transform: translateX(70.7px) scaleX(0~~.~~707); z~~-~~index: 4; }~~
	~~18.75%~~ { ~~transform: translateX(92.4px) scaleX(0.383); z-index: 3; }~~
	~~25%~~ ~~{ transform: translateX(100px) scaleX(0); z-index: 3; }~~
	~~31.25% { transform: translateX(92.4px) scaleX(-0.383); z-index: 2; }~~
	~~37.5% { transform: translateX(70.7px) scaleX(-0.707); z-index: 2; }~~
	~~43.75% { transform: translateX(38.3px) scaleX(-0.924); z-index: 1; }~~
	~~50% { transform: translateX(0px) scaleX(-1); z-index: 1; }~~
	~~56.25% { transform: translateX(-38.3px) scaleX(-0.924); z-index: 1; }~~
	~~62.5% { transform: translateX(-70.7px) scaleX(-0.707); z-index: 2; }~~
	~~68.75% { transform: translateX(-92.4px) scaleX(-0.383); z-index: 2; }~~
	~~75% { transform: translateX(-100px) scaleX(0); z-index: 3; }~~
	~~81.25% { transform: translateX(-92.4px) scaleX(0.383); z-index: 3; }~~
	~~87.5% { transform: translateX(-70.7px) scaleX(0.707); z-index: 4; }~~
	~~93.75% { transform: translateX(-38.3px) scaleX(0.924); z-index: 4; }~~
	~~100% { transform: translateX(0px) scaleX(1); z-index~~: 4; }
	}		}

	/* ~~Top/Bottom are hidden as 2D math cannot fake diagonal tumbling~~ */		/* 16-step projection */
	.~~face~~-~~top,~~ .~~face~~-~~bottom~~ {		@keyframes fake3D {
	~~display~~: ~~none~~;		0% { transform: translateX(0px) scaleX(1); z-index: 4; }
			12.5% { transform: translateX(70.7px) scaleX(0.707); z-index: 4; }
			25% { transform: translateX(100px) scaleX(0); z-index: 3; }
			37.5% { transform: translateX(70.7px) scaleX(-0.707); z-index: 2; }
			50% { transform: translateX(0px) scaleX(-1); z-index: 1; }
			62.5% { transform: translateX(-70.7px) scaleX(-0.707); z-index: 2; }
			75% { transform: translateX(-100px) scaleX(0); z-index: 3; }
			87.5% { transform: translateX(-70.7px) scaleX(0.707); z-index: 4; }
			100% { transform: translateX(0px) scaleX(1); z-index: 4; }
	}		}

SomebodyRum at 18:08, 11 April 2026

2026-04-11T18:08:02Z

← Older revision		Revision as of 18:08, 11 April 2026
Line 1:		Line 1:
	/* Template:2DSpinCube/style.css */		/* Template:2DSpinCube/style.css */
	~~/* Rewritten to use whitelisted 2D transforms so MediaWiki accepts it */~~

	.scene {		.scene {
	width: 200px;		width: 200px;
	height: 200px;		height: 200px;
	margin: 100px auto;		margin: 100px auto;
			position: relative;
	}		}

Line 12:		Line 11:
	height: 100%;		height: 100%;
	position: relative;		position: relative;
	~~/* transform-style: preserve-3d is banned by MW, using a 2D animation instead */~~
	~~animation: spin-and-pulse 6s linear infinite;~~
	}		}

Line 22:		Line 19:
	top: 0;		top: 0;
	left: 0;		left: 0;
			/* This animation mathematically projects 3D rotation into 2D space */
			animation: fake3D 8s linear infinite;
	}		}

	/* ~~We hide all faces except~~ the ~~front one since it's flattened to 2D~~ */		/* Offsetting the start times creates the 4 sides of the 3D box */
	.face-~~back,~~ .face-right, .face-left, .~~face~~-~~top,~~ .~~face~~-~~bottom~~ {		.face-front { animation-delay: 0s; }
	~~display~~: ~~none~~;		.face-right { animation-delay: -2s; }
			.face-back { animation-delay: -4s; }
			.face-left { animation-delay: -6s; }

			/* 16-step sine/cosine projection to simulate flawless 3D spinning */
			@keyframes fake3D {
			0% { transform: translateX(0px) scaleX(1); z-index: 4; }
			6.25% { transform: translateX(38.3px) scaleX(0.924); z-index: 4; }
			12.5% { transform: translateX(70.7px) scaleX(0.707); z-index: 4; }
			18.75% { transform: translateX(92.4px) scaleX(0.383); z-index: 3; }
			25% { transform: translateX(100px) scaleX(0); z-index: 3; }
			31.25% { transform: translateX(92.4px) scaleX(-0.383); z-index: 2; }
			37.5% { transform: translateX(70.7px) scaleX(-0.707); z-index: 2; }
			43.75% { transform: translateX(38.3px) scaleX(-0.924); z-index: 1; }
			50% { transform: translateX(0px) scaleX(-1); z-index: 1; }
			56.25% { transform: translateX(-38.3px) scaleX(-0.924); z-index: 1; }
			62.5% { transform: translateX(-70.7px) scaleX(-0.707); z-index: 2; }
			68.75% { transform: translateX(-92.4px) scaleX(-0.383); z-index: 2; }
			75% { transform: translateX(-100px) scaleX(0); z-index: 3; }
			81.25% { transform: translateX(-92.4px) scaleX(0.383); z-index: 3; }
			87.5% { transform: translateX(-70.7px) scaleX(0.707); z-index: 4; }
			93.75% { transform: translateX(-38.3px) scaleX(0.924); z-index: 4; }
			100% { transform: translateX(0px) scaleX(1); z-index: 4; }
	}		}

	/* ~~Whitelisted keyframes for animation~~ */		/* Top/Bottom are hidden as 2D math cannot fake diagonal tumbling */
	~~@keyframes spin~~-~~and~~-~~pulse {~~		.face-top, .face-bottom {
	0% { ~~transform: rotate(0deg) scale(1); }~~		display: none;
	~~50% { transform: rotate(180deg) scale(0.8); }~~
	~~100% { transform~~: ~~rotate(360deg) scale(1)~~; }
	}		}

SomebodyRum at 18:07, 11 April 2026

2026-04-11T18:07:22Z

← Older revision		Revision as of 18:07, 11 April 2026
Line 1:		Line 1:
	/* Template:2DSpinCube/style.css */		/* Template:2DSpinCube/style.css */
			/* Rewritten to use whitelisted 2D transforms so MediaWiki accepts it */

	.scene {		.scene {
	width: 200px;		width: 200px;
	height: 200px;		height: 200px;
	margin: 100px auto;		margin: 100px auto;
	~~position: relative;~~
	}		}

Line 11:		Line 12:
	height: 100%;		height: 100%;
	position: relative;		position: relative;
			/* transform-style: preserve-3d is banned by MW, using a 2D animation instead */
			animation: spin-and-pulse 6s linear infinite;
	}		}

Line 19:		Line 22:
	top: 0;		top: 0;
	left: 0;		left: 0;
	~~/* This animation mathematically projects 3D rotation into 2D space */~~
	~~animation: fake3D 8s linear infinite;~~
	}		}

	/* ~~Offsetting~~ the ~~start times creates the 4 sides of the 3D box~~ */		/* We hide all faces except the front one since it's flattened to 2D */
	.face-~~front { animation-delay: 0s; }~~		.face-back, .face-right, .face-left, .face-top, .face-bottom {
	.face-right ~~{ animation-delay: -2s; }~~		display: none;
	.face-~~back { animation-delay: -4s; }~~
	.face-~~left { animation-delay: -6s; }~~

	~~/* 16-step sine/cosine projection to simulate flawless 3D spinning */~~
	~~@keyframes fake3D {~~
	~~0% { transform: translateX(0px) scaleX(1); z-index: 4; }~~
	6.~~25% { transform: translateX(38.3px) scaleX(0.924); z-index: 4; }~~
	~~12.5% { transform: translateX(70.7px) scaleX(0.707); z-index: 4; }~~
	~~18.75% { transform: translateX(92.4px) scaleX(0.383); z-index: 3; }~~
	~~25% { transform: translateX(100px) scaleX(0); z-index: 3; }~~
	~~31.25% { transform: translateX(92.4px) scaleX(-0.383); z-index: 2; }~~
	~~37.5% { transform: translateX(70.7px) scaleX(-0.707); z-index: 2; }~~
	~~43.75% { transform: translateX(38.3px) scaleX(-0.924); z-index: 1; }~~
	~~50% { transform: translateX(0px) scaleX(-1); z-index: 1; }~~
	~~56.25% { transform: translateX(-38.3px) scaleX(-0.924); z~~-~~index: 1; }~~
	~~62.5%~~ { ~~transform: translateX(-70.7px) scaleX(-0.707); z-index: 2; }~~
	~~68.75% { transform: translateX(-92.4px) scaleX(-0.383); z-index: 2; }~~
	~~75% { transform: translateX(-100px) scaleX(0); z-index: 3; }~~
	~~81.25% { transform: translateX(-92.4px) scaleX(0.383); z-index: 3; }~~
	~~87.5% { transform: translateX(-70.7px) scaleX(0.707); z-index: 4; }~~
	~~93.75% { transform: translateX(-38.3px) scaleX(0.924); z-index: 4; }~~
	~~100% { transform: translateX(0px) scaleX(1); z-index~~: 4; }
	}		}

	/* ~~Top/Bottom are hidden as 2D math cannot fake diagonal tumbling~~ */		/* Whitelisted keyframes for animation */
	~~.face~~-~~top, .face~~-~~bottom~~ {		@keyframes spin-and-pulse {
	~~display~~: ~~none~~;		0% { transform: rotate(0deg) scale(1); }
			50% { transform: rotate(180deg) scale(0.8); }
			100% { transform: rotate(360deg) scale(1); }
	}		}

SomebodyRum: Created page with "/* Template:2DSpinCube/style.css / .scene { width: 200px; height: 200px; margin: 100px auto; position: relative; } .cube { width: 100%; height: 100%; position: relative; } .cube-face { position: absolute; width: 200px; height: 200px; top: 0; left: 0; / This animation mathematically projects 3D rotation into 2D space / animation: fake3D 8s linear infinite; } / Offsetting the start times creates the 4 sides of the 3D box */ .face-front { animation-dela..."

2026-04-11T18:05:42Z

Created page with "Template:2DSpinCube/style.css: .scene { width: 200px; height: 200px; margin: 100px auto; position: relative; } .cube { width: 100%; height: 100%; position: relative; } .cube-face { position: absolute; width: 200px; height: 200px; top: 0; left: 0; This animation mathematically projects 3D rotation into 2D space: animation: fake3D 8s linear infinite; } Offsetting the start times creates the 4 sides of the 3D box: .face-front { animation-dela..."

New page

/* Template:2DSpinCube/style.css */
.scene {
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;
}

.cube {
width: 100%;
height: 100%;
position: relative;
}

.cube-face {
position: absolute;
width: 200px;
height: 200px;
top: 0;
left: 0;
/* This animation mathematically projects 3D rotation into 2D space */
animation: fake3D 8s linear infinite;
}

/* Offsetting the start times creates the 4 sides of the 3D box */
.face-front { animation-delay: 0s; }
.face-right { animation-delay: -2s; }
.face-back { animation-delay: -4s; }
.face-left { animation-delay: -6s; }

/* 16-step sine/cosine projection to simulate flawless 3D spinning */
@keyframes fake3D {
0% { transform: translateX(0px) scaleX(1); z-index: 4; }
6.25% { transform: translateX(38.3px) scaleX(0.924); z-index: 4; }
12.5% { transform: translateX(70.7px) scaleX(0.707); z-index: 4; }
18.75% { transform: translateX(92.4px) scaleX(0.383); z-index: 3; }
25% { transform: translateX(100px) scaleX(0); z-index: 3; }
31.25% { transform: translateX(92.4px) scaleX(-0.383); z-index: 2; }
37.5% { transform: translateX(70.7px) scaleX(-0.707); z-index: 2; }
43.75% { transform: translateX(38.3px) scaleX(-0.924); z-index: 1; }
50% { transform: translateX(0px) scaleX(-1); z-index: 1; }
56.25% { transform: translateX(-38.3px) scaleX(-0.924); z-index: 1; }
62.5% { transform: translateX(-70.7px) scaleX(-0.707); z-index: 2; }
68.75% { transform: translateX(-92.4px) scaleX(-0.383); z-index: 2; }
75% { transform: translateX(-100px) scaleX(0); z-index: 3; }
81.25% { transform: translateX(-92.4px) scaleX(0.383); z-index: 3; }
87.5% { transform: translateX(-70.7px) scaleX(0.707); z-index: 4; }
93.75% { transform: translateX(-38.3px) scaleX(0.924); z-index: 4; }
100% { transform: translateX(0px) scaleX(1); z-index: 4; }
}

/* Top/Bottom are hidden as 2D math cannot fake diagonal tumbling */
.face-top, .face-bottom {
display: none;
}