body {
    background: url("http://wallpapercave.com/wp/QO0ZTcA.jpg");
    background-size: cover;
    text-align: center;
    text-align: -moz-center;
    text-align: -webkit-center;
    font-size: x-large;
}
img.essai {
    width: 100px;
    transition: 1s;
}
img.essai:hover { /* Un exemple de commentaire en CSS */
    width: 300px;
    transition: 1s;
}
.conteneur_cylindre { /* La div qui contient le cylindre et permet de positionner la caméra */
    margin-top: 12.5vh;
    perspective: 800px;
    perspective-origin: 50% 30%;
}
.cylindre { /* La div qui contient toutes les faces */
    width: 50vw;
    height: 50vh;
    transform-style: preserve-3d; /* Important */
}
.photo { /* Selecteur de classe: la classe photo */
    position: absolute; /* Positionnes toutes les div de class="photo" en haut */
                        /* à gauche de la div de class="cylindre" */   
    /* border: solid 1px; */
    width: 50vw;
    height: 50vh;

    transform-origin: 50% 50% -100vw; /* Positionner l'axe de rotation */
}
.photo > img {
    max-width: 60vw;
    max-height: 55vh;
    border-radius: 20px;
}
.face_0 {
}
.face_1 {
    transform: rotateY(36deg); /* On fait tourner la face 1 de 36 degrés autour de l'axe Y */
}
.face_2 {
    transform: rotateY(72deg);
}
.face_3 {
    transform: rotateY(108deg);
}
.face_4 {
    transform: rotateY(144deg);
}
.face_5 {
    transform: rotateY(180deg);
}
.face_6 {
    transform: rotateY(216deg);
}
.face_7 {
    transform: rotateY(252deg);
}
.face_8 {
    transform: rotateY(288deg);
}
.face_9 {
    transform: rotateY(324deg);
}
footer {
    position: fixed;
    bottom: 5px;
    width: 98vw;

    padding-right: 5px;
    /* border: dashed 1px; */
    border-radius: 25px;
    font-size: xx-large;
}
footer img {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 15vw;
    /* border-radius: 5px; */
}
@keyframes rotation-horizontale {
    0% {transform: rotateY(0deg);}
    10% {transform: rotateY(36deg);}
    20% {transform: rotateY(72deg);}
    30% {transform: rotateY(108deg);}
    40% {transform: rotateY(144deg);}
    50% {transform: rotateY(180deg);}
    60% {transform: rotateY(216deg);}
    70% {transform: rotateY(252deg);}
    80% {transform: rotateY(288deg);}
    90% {transform: rotateY(324deg);}
    100% {transform: rotateY(360deg);}
}
.tournant {
    transform-origin: 50% 50% -100vw;
    animation: rotation-horizontale 30s infinite;
    animation-timing-function: ease;
}
.cache {
    display: none;
}