Template:3DCube/style.css: Difference between revisions

/* Template:3DCube/style.css
   2D matrix simulation of a rotating 3D cube
   No 3D CSS properties — sanitizer safe */

.scene {
    width: 200px;
    height: 200px;
    margin: 120px 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%;
    overflow: hidden;
    background: transparent;
}

/* Force images to fill each face */
.cube-face img {
    display: block;
    width: 200px !important;
    height: 200px !important;
    border: none !important;
    outline: none !important;
}

/* z-index steps are set per keyframe as discrete jumps
   so faces stack correctly as they rotate into view */

.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    { z-index: 4; animation: face-top    8s linear infinite; }
.face-bottom { z-index: 0; animation: face-bottom 8s linear infinite; }

@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.707, 0.354,   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.707, 0.354,   0, -86.6); }
}

@keyframes face-bottom {
    0%    { transform: matrix(1,     0,      0.707, 0.354,   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.707, 0.354,   0, 86.6); }
}