Template:3DCube/style.css

/* 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; }
}