SomebodyRum at 20:55, 12 April 2026

← Older revision		Revision as of 17:42, 11 April 2026
Line 1:		Line 1:
	/* Template:3DCube/style.css */		/* Template:3DCube/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: 3D cube first version css

2026-04-11T17:39:11Z

3D cube first version css

New page

/* Template:3DCube/style.css */
/* Rewritten to use whitelisted 2D transforms so MediaWiki accepts it */

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

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

.cube-face {
position: absolute;
width: 200px;
height: 200px;
top: 0;
left: 0;
}

/* We hide all faces except the front one since it's flattened to 2D */
.face-back, .face-right, .face-left, .face-top, .face-bottom {
display: none;
}

/* Whitelisted keyframes for animation */
@keyframes spin-and-pulse {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(0.8); }
100% { transform: rotate(360deg) scale(1); }
}

Template:3DCube/style.css - Revision history

SomebodyRum at 20:55, 12 April 2026

SomebodyRum at 20:29, 12 April 2026

SomebodyRum at 16:01, 12 April 2026

SomebodyRum at 15:27, 12 April 2026

SomebodyRum at 17:58, 11 April 2026

SomebodyRum at 17:53, 11 April 2026

SomebodyRum at 17:47, 11 April 2026

SomebodyRum at 17:42, 11 April 2026

SomebodyRum: 3D cube first version css