Template:2DSpinCube/style.css

/* Template:2DSpinCube/style.css */
.cube2d-scene {
	width: 200px;
	height: 200px;
	/* Changed from 100px to 20px to remove dead space */
	margin: 20px auto; 
	position: relative;
	/* This ensures the container doesn't expand beyond the cube */
	overflow: visible; 
}

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

.cube2d-face {
	position: absolute;
	width: 200px;
	height: 200px;
	top: 0;
	left: 0;
	animation: cube2d-spin 8s linear infinite;
}

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

/* 16-step projection */
@keyframes cube2d-spin {
	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: 1; }
	68.75%  { transform: translateX(-92.4px) scaleX(-0.383); z-index: 2; }
	75%     { transform: translateX(-100px) scaleX(0); z-index: 2; }
	81.25%  { transform: translateX(-92.4px) scaleX(0.383); z-index: 3; }
	87.5%   { transform: translateX(-70.7px) scaleX(0.707); z-index: 3; }
	93.75%  { transform: translateX(-38.3px) scaleX(0.924); z-index: 4; }
	100%    { transform: translateX(0px) scaleX(1); z-index: 4; }
}