Template:2DSpinCube/style.css

/* 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-delay: 0s; }
.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; }
}

/* Top/Bottom are hidden as 2D math cannot fake diagonal tumbling */
.face-top, .face-bottom {
	display: none;
}