@import url(http://fonts.googleapis.com/css?family=Anaheia);

* {
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
    box-sizing: border-box;
}

*:before,
*:after {
    box-sizing: border-box;
}

.container {
    margin: 4% auto;
    /* width: 210px; */
    /* height: 140px; */
    position: relative;
    perspective: 1000px;
    border: solid 5px blue;
}

/* @keyframes rotation {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
} */

.one {
    background: url(../image/Eddy\ 1.jpg);
    transform: rotateY(0deg) translateZ(150px);
}

.two {
    background: url(../image/nest\ 1.jpg);
    transform: rotateY(180deg) translateZ(150px);
}

.three {
    background: url(../image/Bigger.jpg);
    transform: rotateY(90deg) translateZ(150px);
}

.four {
    background: url(../image/Dee_S\ QR.png);
    transform: rotateY(-90deg) translateZ(150px);
}

.five {
    background: url(../image/passover\ 1.jpg);
    transform: rotateX(90deg) translateZ(150px);
}

.six {
    background: url(../image/peace.jpg);
    transform: rotateX(-90deg) translateZ(150px);
}

.item {
    border: 1px solid rebeccapurple !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.cube-wrapper {
    width: 300px;
    height: 300px;
    perspective: 1000px;
    margin: 0 auto;
}

.cube {
    transform-style: preserve-3d;
    transform: translateZ(-100px) rotateZ(45deg) rotateX(45deg);
    animation: move 5s infinite linear;
}

@keyframes move {
    0% {
        transform: translateZ(-100px) rotateY(360deg) rotateZ(0deg) rotateX(45deg);
    }

    50% {
        transform: translateZ(-100px) rotateY(180deg) rotateZ(180deg) rotateX(45deg);
    }

    100% {
        transform: translateZ(-100px) rotateY(0deg) rotateZ(360deg) rotateX(45deg);
    }

}

.cube:hover{
    animation-play-state: paused
}