#container {
    width: 200px;
    height: 400px;
    margin: 100px auto;
    perspective: 800px;
}

.baner {
    width: 200px;
    margin: 0 auto;
}

#box {
    width: 200px;
    transform-style: preserve-3d;
    color: orange;
    font: 40px impact;
    text-align: center;
    animation: rotate 25s linear;
}

#box:hover {
    animation-play-state: paused;
}

#box img {
    width: 200px;
    height: 400px;
}

#front {
    position: absolute;
    width: 200px;
    height: 400px;
    opacity: 1;
}

#back {
    position: absolute;
    width: 200px;
    height: 400px;
    opacity: 1;
}

#left {
    position: absolute;
    width: 200px;
    height: 400px;
    opacity: 1;
}

#right {
    position: absolute;
    width: 200px;
    height: 400px;
    opacity: 1;
}

#top {
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 1;
}

#bottom {
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 1;
}

#front {
    transform: translateZ(100px);
    background-color: #1f122c;
}

#back {
    transform: rotateY(180deg) translateZ(100px);
    background-color: #1f122c;
}

#left {
    transform: rotateY(-90deg) translateX(-100px);
    background-color: #1f122c;
    transform-origin: left;
}

#right {
    transform: rotateY(90deg) translateX(100px);
    background-color: #1f122c;
    transform-origin: right;
}

#top {
    transform: rotateX(-90deg) translateY(-100px);
    background-color: #1f122c;
    transform-origin: top;
}

#bottom {
    transform: rotateX(90deg) translateY(100px);
    background-color: #1f122c;
    transform-origin: bottom;
}

@keyframes rotate {
    0%{
        transform: rotateY(0deg);
    }
    100%{
        transform: rotateY(360deg);
    }
}

/* akcijska-cena css */
.color-change-4x {
    -webkit-animation: color-change-4x 6s linear infinite alternate both;
    animation: color-change-4x 6s linear infinite alternate both;
}
/* ----------------------------------------------
 * Generated by Animista on 2019-10-11 13:53:23
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation color-change-4x
 * ----------------------------------------
 */
@-webkit-keyframes color-change-4x {
    0% {
        background: #19dcea;
    }
    33.3333% {
        background: #b22cff;
    }
    66.666% {
        background: #ea2222;
    }
    100% {
        background: #f5be10;
    }
}
@keyframes color-change-4x {
    0% {
        background: #19dcea;
    }
    33.3333% {
        background: #b22cff;
    }
    66.666% {
        background: #ea2222;
    }
    100% {
        background: #f5be10;
    }
}

/* za tekst */
.tracking-in-expand-fwd {
    -webkit-animation: tracking-in-expand-fwd 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation: tracking-in-expand-fwd 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2019-10-11 14:9:22
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tracking-in-expand-fwd
 * ----------------------------------------
 */
@-webkit-keyframes tracking-in-expand-fwd {
    0% {
        letter-spacing: -0.5em;
        -webkit-transform: translateZ(-700px);
        transform: translateZ(-700px);
        opacity: 0;
    }
    40% {
        opacity: 0.6;
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}
@keyframes tracking-in-expand-fwd {
    0% {
        letter-spacing: -0.5em;
        -webkit-transform: translateZ(-700px);
        transform: translateZ(-700px);
        opacity: 0;
    }
    40% {
        opacity: 0.6;
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}

/* shake effect */
.shake-horizontal {
    -webkit-animation: shake-horizontal 1.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    animation: shake-horizontal 1.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2019-10-11 14:35:40
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shake-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes shake-horizontal {
    0%,
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }
    20%,
    40%,
    60% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
    }
    80% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px);
    }
    90% {
        -webkit-transform: translateX(-8px);
        transform: translateX(-8px);
    }
}
@keyframes shake-horizontal {
    0%,
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }
    20%,
    40%,
    60% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
    }
    80% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px);
    }
    90% {
        -webkit-transform: translateX(-8px);
        transform: translateX(-8px);
    }
}

/* entrance rotating */
.rotate-in-center {
    -webkit-animation: rotate-in-center 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: rotate-in-center 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2019-10-11 15:16:18
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation rotate-in-center
 * ----------------------------------------
 */
@-webkit-keyframes rotate-in-center {
    0% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }
}
@keyframes rotate-in-center {
    0% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }
}