* {
    margin: 0px;
    padding: 0px;
    border: 0px;
    border-collapse: collapse;
    vertical-align: top;
    box-sizing: border-box;
    /* user-select: none; */
    /* -webkit-appearance: none; */
}

body {
    background-color: #3f51b5;
}

header{
    background-color: #fff;
    padding: 20px;
    display: flex;
    justify-content: center;
}
header span {
    font-family: Helvetica, sans-serif;
    font-weight: 300;
    font-size: 26px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}

.container {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    /* margin-top: 20%; */
}

#cube {
    width: 400px;
    height: 400px;
    -webkit-animation: AnimCube 6s infinite linear;
    -webkit-transform-style: preserve-3d;
}

#cube div img {
    width: 100%;
    height: 100%;
}

#cube:hover div {
    box-shadow: 1px 20px 100px #fff;
}
#cube div {
    box-shadow: 1px 2px 4px #000;
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 0.9;
    -webkit-transition: 2s;
    cursor: pointer;
}

#front {
    -webkit-transform: translateZ(-100px);
}

#back {
    -webkit-transform: translateZ(100px);
}

#left {
    -webkit-transform: rotateY(-90deg) translateZ(100px);
}

#right {
    -webkit-transform: rotateY(90deg) translateZ(100px);
}

#up {
    -webkit-transform: rotateX(-90deg) translateZ(100px);
}

#bottom {
    -webkit-transform: rotateX(90deg) translateZ(100px);
}

@-webkit-keyframes AnimCube {

    /* Animation pour Webkit (Chrome, Safari, Android, ...) */
    from {
        -webkit-transform: rotateX(0deg) rotateY(0deg);
    }

    to {
        -webkit-transform: rotateX(360deg) rotateY(360deg);
    }
}

/* Décomposition du cube quand on passe la souris dessus */
#cube:hover #front {
    -webkit-transform: translateZ(-150px);
}

#cube:hover #back {
    -webkit-transform: translateZ(150px);
}

#cube:hover #left {
    -webkit-transform: rotateY(-90deg) translateZ(150px);
}

#cube:hover #right {
    -webkit-transform: rotateY(90deg) translateZ(150px);
}

#cube:hover #up {
    -webkit-transform: rotateX(-90deg) translateZ(150px);
}

#cube:hover #bottom {
    -webkit-transform: rotateX(90deg) translateZ(150px);
}