Template:2DSpinCube/style.css: Difference between revisions

/* 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;
    /* Animation applied to all faces */
    animation: fake3D 8s linear infinite;
}

/* Offsetting faces for the horizontal spin */
.face-front  { animation-delay: 0s; }
.face-right  { animation-delay: -2s; }
.face-back   { animation-delay: -4s; }
.face-left   { animation-delay: -6s; }

/* Hide top/bottom since we are only doing horizontal spin */
.face-top, .face-bottom {
    display: none;
}

/* 16-step projection */
@keyframes fake3D {
    0%      { transform: translateX(0px) scaleX(1); z-index: 4; }
    12.5%   { transform: translateX(70.7px) scaleX(0.707); z-index: 4; }
    25%     { transform: translateX(100px) scaleX(0); z-index: 3; }
    37.5%   { transform: translateX(70.7px) scaleX(-0.707); z-index: 2; }
    50%     { transform: translateX(0px) scaleX(-1); z-index: 1; }
    62.5%   { transform: translateX(-70.7px) scaleX(-0.707); z-index: 2; }
    75%     { transform: translateX(-100px) scaleX(0); z-index: 3; }
    87.5%   { transform: translateX(-70.7px) scaleX(0.707); z-index: 4; }
    100%    { transform: translateX(0px) scaleX(1); z-index: 4; }
}