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:2DSpinCube/style.css: Difference between revisions

From SNCApedia, the shit nobody cares about encyclopedia
Jump to navigationJump to search
Newer edit →
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..."
 
No edit summary
Tag: Reverted
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); }
}
}

Revision as of 18:07, 11 April 2026

/* Template:2DSpinCube/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); }
}
Retrieved from "https://www.sncapedia.org/index.php?title=Template:2DSpinCube/style.css&oldid=29884"