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

From SNCApedia, the shit nobody cares about encyclopedia
Jump to navigationJump to search
← Older editNewer edit →
No edit summary
No edit summary
Line 1: Line 1:
/* Template:3DCube/style.css */
/* Template:3DCube/style.css */
/* 2D Affine Matrix Engine for True 3D Simulation */
.scene {
.scene {
width: 200px;
width: 200px;
Line 21: Line 19:
top: 0;
top: 0;
left: 0;
left: 0;
transform-origin: 50% 50%;
/* FIX 1: Solid background so the Soyjaks don't bleed through! */
}
background-color: #ffffff;  
 
border: 2px solid #000;
/* Bind each face to its pre-calculated 3D matrix projection */
animation: spin-wall 8s infinite linear;
.face-front  { animation: wall-front  8s linear infinite; }
.face-right  { animation: wall-right  8s linear infinite; }
.face-back  { animation: wall-back  8s linear infinite; }
.face-left  { animation: wall-left  8s linear infinite; }
.face-top    { animation: face-top    8s linear infinite; z-index: 4; }
.face-bottom { animation: face-bottom 8s linear infinite; z-index: 0; }
 
/* =========================================
  PRE-CALCULATED 3D -> 2D MATRIX KEYFRAMES
  ========================================= */
 
@keyframes wall-front {
0%  { transform: matrix(1, 0, 0, 0.866, 0, 50); z-index: 6; }
12.5%{ transform: matrix(0.707, -0.354, 0, 0.866, 70.7, 35.4); z-index: 5; }
25%  { transform: matrix(0, -0.5, 0, 0.866, 100, 0); z-index: 3; }
37.5%{ transform: matrix(-0.707, -0.354, 0, 0.866, 70.7, -35.4); z-index: 2; }
50%  { transform: matrix(-1, 0, 0, 0.866, 0, -50); z-index: 1; }
62.5%{ transform: matrix(-0.707, 0.354, 0, 0.866, -70.7, -35.4); z-index: 2; }
75%  { transform: matrix(0, 0.5, 0, 0.866, -100, 0); z-index: 3; }
87.5%{ transform: matrix(0.707, 0.354, 0, 0.866, -70.7, 35.4); z-index: 5; }
100% { transform: matrix(1, 0, 0, 0.866, 0, 50); z-index: 6; }
}
 
@keyframes wall-right {
0%  { transform: matrix(0, -0.5, 0, 0.866, 100, 0); z-index: 3; }
12.5%{ transform: matrix(-0.707, -0.354, 0, 0.866, 70.7, -35.4); z-index: 2; }
25%  { transform: matrix(-1, 0, 0, 0.866, 0, -50); z-index: 1; }
37.5%{ transform: matrix(-0.707, 0.354, 0, 0.866, -70.7, -35.4); z-index: 2; }
50%  { transform: matrix(0, 0.5, 0, 0.866, -100, 0); z-index: 3; }
62.5%{ transform: matrix(0.707, 0.354, 0, 0.866, -70.7, 35.4); z-index: 5; }
75%  { transform: matrix(1, 0, 0, 0.866, 0, 50); z-index: 6; }
87.5%{ transform: matrix(0.707, -0.354, 0, 0.866, 70.7, 35.4); z-index: 5; }
100% { transform: matrix(0, -0.5, 0, 0.866, 100, 0); z-index: 3; }
}
 
@keyframes wall-back {
0%  { transform: matrix(-1, 0, 0, 0.866, 0, -50); z-index: 1; }
12.5%{ transform: matrix(-0.707, 0.354, 0, 0.866, -70.7, -35.4); z-index: 2; }
25%  { transform: matrix(0, 0.5, 0, 0.866, -100, 0); z-index: 3; }
37.5%{ transform: matrix(0.707, 0.354, 0, 0.866, -70.7, 35.4); z-index: 5; }
50%  { transform: matrix(1, 0, 0, 0.866, 0, 50); z-index: 6; }
62.5%{ transform: matrix(0.707, -0.354, 0, 0.866, 70.7, 35.4); z-index: 5; }
75%  { transform: matrix(0, -0.5, 0, 0.866, 100, 0); z-index: 3; }
87.5%{ transform: matrix(-0.707, -0.354, 0, 0.866, 70.7, -35.4); z-index: 2; }
100% { transform: matrix(-1, 0, 0, 0.866, 0, -50); z-index: 1; }
}
 
@keyframes wall-left {
0%  { transform: matrix(0, 0.5, 0, 0.866, -100, 0); z-index: 3; }
12.5%{ transform: matrix(0.707, 0.354, 0, 0.866, -70.7, 35.4); z-index: 5; }
25%  { transform: matrix(1, 0, 0, 0.866, 0, 50); z-index: 6; }
37.5%{ transform: matrix(0.707, -0.354, 0, 0.866, 70.7, 35.4); z-index: 5; }
50%  { transform: matrix(0, -0.5, 0, 0.866, 100, 0); z-index: 3; }
62.5%{ transform: matrix(-0.707, -0.354, 0, 0.866, 70.7, -35.4); z-index: 2; }
75%  { transform: matrix(-1, 0, 0, 0.866, 0, -50); z-index: 1; }
87.5%{ transform: matrix(-0.707, 0.354, 0, 0.866, -70.7, -35.4); z-index: 2; }
100% { transform: matrix(0, 0.5, 0, 0.866, -100, 0); z-index: 3; }
}
}


@keyframes face-top {
/* Offsetting the 4 walls */
0%  { transform: matrix(1, 0, 0, 0.5, 0, -86.6); }
.face-front { animation-delay: 0s; }
12.5%{ transform: matrix(0.707, -0.354, 0.707, 0.354, 0, -86.6); }
.face-right { animation-delay: -2s; }
25%  { transform: matrix(0, -0.5, 1, 0, 0, -86.6); }
.face-back { animation-delay: -4s; }
37.5%{ transform: matrix(-0.707, -0.354, 0.707, -0.354, 0, -86.6); }
.face-left { animation-delay: -6s; }
50% { transform: matrix(-1, 0, 0, -0.5, 0, -86.6); }
62.5%{ transform: matrix(-0.707, 0.354, -0.707, -0.354, 0, -86.6); }
75% { transform: matrix(0, 0.5, -1, 0, 0, -86.6); }
87.5%{ transform: matrix(0.707, 0.354, -0.707, 0.354, 0, -86.6); }
100% { transform: matrix(1, 0, 0, 0.5, 0, -86.6); }
}


@keyframes face-bottom {
/*
0%  { transform: matrix(1, 0, 0, 0.5, 0, 86.6); }
* FIX 2: 16-step high-resolution 2D projection.
12.5%{ transform: matrix(0.707, -0.354, 0.707, 0.354, 0, 86.6); }
* This guarantees a perfectly smooth circle with ZERO wobbling.
25%  { transform: matrix(0, -0.5, 1, 0, 0, 86.6); }
* Hides backfaces using opacity so they don't visually overlap.
37.5%{ transform: matrix(-0.707, -0.354, 0.707, -0.354, 0, 86.6); }
*/
50% { transform: matrix(-1, 0, 0, -0.5, 0, 86.6); }
@keyframes spin-wall {
62.5%{ transform: matrix(-0.707, 0.354, -0.707, -0.354, 0, 86.6); }
0%      { transform: translateX(0px) scaleX(1); opacity: 1; z-index: 4; }
75% { transform: matrix(0, 0.5, -1, 0, 0, 86.6); }
6.25%  { transform: translateX(38.3px) scaleX(0.924); opacity: 1; z-index: 4; }
87.5%{ transform: matrix(0.707, 0.354, -0.707, 0.354, 0, 86.6); }
12.5%   { transform: translateX(70.7px) scaleX(0.707); opacity: 1; z-index: 3; }
100% { transform: matrix(1, 0, 0, 0.5, 0, 86.6); }
18.75%  { transform: translateX(92.4px) scaleX(0.383); opacity: 1; z-index: 3; }
24.9%  { opacity: 1; }
25%    { transform: translateX(100px) scaleX(0); opacity: 0; z-index: 2; }
31.25%  { transform: translateX(92.4px) scaleX(-0.383); opacity: 0; z-index: 2; }
37.5%   { transform: translateX(70.7px) scaleX(-0.707); opacity: 0; z-index: 1; }
43.75%  { transform: translateX(38.3px) scaleX(-0.924); opacity: 0; z-index: 1; }
50%     { transform: translateX(0px) scaleX(-1); opacity: 0; z-index: 1; }
56.25%  { transform: translateX(-38.3px) scaleX(-0.924); opacity: 0; z-index: 1; }
62.5%   { transform: translateX(-70.7px) scaleX(-0.707); opacity: 0; z-index: 1; }
68.75%  { transform: translateX(-92.4px) scaleX(-0.383); opacity: 0; z-index: 2; }
74.9%  { opacity: 0; }
75%     { transform: translateX(-100px) scaleX(0); opacity: 1; z-index: 2; }
81.25%  { transform: translateX(-92.4px) scaleX(0.383); opacity: 1; z-index: 3; }
87.5%   { transform: translateX(-70.7px) scaleX(0.707); opacity: 1; z-index: 3; }
93.75%  { transform: translateX(-38.3px) scaleX(0.924); opacity: 1; z-index: 4; }
100%   { transform: translateX(0px) scaleX(1); opacity: 1; z-index: 4; }
}
}

Revision as of 17:53, 11 April 2026

/* Template:3DCube/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;
	/* FIX 1: Solid background so the Soyjaks don't bleed through! */
	background-color: #ffffff; 
	border: 2px solid #000;
	animation: spin-wall 8s infinite linear;
}

/* Offsetting the 4 walls */
.face-front { animation-delay: 0s; }
.face-right { animation-delay: -2s; }
.face-back  { animation-delay: -4s; }
.face-left  { animation-delay: -6s; }

/* 
 * FIX 2: 16-step high-resolution 2D projection. 
 * This guarantees a perfectly smooth circle with ZERO wobbling.
 * Hides backfaces using opacity so they don't visually overlap.
 */
@keyframes spin-wall {
	0%      { transform: translateX(0px) scaleX(1); opacity: 1; z-index: 4; }
	6.25%   { transform: translateX(38.3px) scaleX(0.924); opacity: 1; z-index: 4; }
	12.5%   { transform: translateX(70.7px) scaleX(0.707); opacity: 1; z-index: 3; }
	18.75%  { transform: translateX(92.4px) scaleX(0.383); opacity: 1; z-index: 3; }
	24.9%   { opacity: 1; }
	25%     { transform: translateX(100px) scaleX(0); opacity: 0; z-index: 2; }
	31.25%  { transform: translateX(92.4px) scaleX(-0.383); opacity: 0; z-index: 2; }
	37.5%   { transform: translateX(70.7px) scaleX(-0.707); opacity: 0; z-index: 1; }
	43.75%  { transform: translateX(38.3px) scaleX(-0.924); opacity: 0; z-index: 1; }
	50%     { transform: translateX(0px) scaleX(-1); opacity: 0; z-index: 1; }
	56.25%  { transform: translateX(-38.3px) scaleX(-0.924); opacity: 0; z-index: 1; }
	62.5%   { transform: translateX(-70.7px) scaleX(-0.707); opacity: 0; z-index: 1; }
	68.75%  { transform: translateX(-92.4px) scaleX(-0.383); opacity: 0; z-index: 2; }
	74.9%   { opacity: 0; }
	75%     { transform: translateX(-100px) scaleX(0); opacity: 1; z-index: 2; }
	81.25%  { transform: translateX(-92.4px) scaleX(0.383); opacity: 1; z-index: 3; }
	87.5%   { transform: translateX(-70.7px) scaleX(0.707); opacity: 1; z-index: 3; }
	93.75%  { transform: translateX(-38.3px) scaleX(0.924); opacity: 1; z-index: 4; }
	100%    { transform: translateX(0px) scaleX(1); opacity: 1; z-index: 4; }
}
Retrieved from "https://www.sncapedia.org/index.php?title=Template:3DCube/style.css&oldid=29876"