Template:3DCube/style.css

/* Template:3DCube/style.css */
/* 2D Affine Matrix Engine for True 3D Simulation */

.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;
	transform-origin: 50% 50%;
}

/* Bind each face to its pre-calculated 3D matrix projection */
.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 {
	0%   { transform: matrix(1, 0, 0, 0.5, 0, -86.6); }
	12.5%{ transform: matrix(0.707, -0.354, 0.707, 0.354, 0, -86.6); }
	25%  { transform: matrix(0, -0.5, 1, 0, 0, -86.6); }
	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); }
	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); }
	12.5%{ transform: matrix(0.707, -0.354, 0.707, 0.354, 0, 86.6); }
	25%  { transform: matrix(0, -0.5, 1, 0, 0, 86.6); }
	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); }
	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); }
}