body{
background-color : #006400;
}
.couleurliens {
   color: black;
}
h1{
  text-align: center;
}
.right{
  float:right;
  
}
.left{
  float:left;
}
.boite{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
}

#conteneur{
   width:position:relative;
   width:300px;
   height:200px;
   margin:0px auto;
   -webkit-perspective:2800px;
   -webkit-perspective-origin:50% 50%;
   -moz-perspective:2800px;
   -moz-perspective-origin:50% 50%;
   -o-perspective:2800px;
   -o-perspective-origin:50% 50%;
} 

.face{
   width:300px;
   height:300px;
   position:absolute;
   line-height:300px;
   text-align:center;
   font-size:80px;
   opacity:0.7;
   border:solid 1px black;
}

.cote1{
   background-image:url("img/fond6.gif");
  
   transform:translateZ(-150px) translateX(150px) rotateY(90deg);
   -webkit-transform:translateZ(-150px) translateX(150px) rotateY(90deg);
   -moz-transform:translateZ(-150px) translateX(150px) rotateY(90deg);
   -o-transform:translateZ(-150px) translateX(150px) rotateY(90deg);
   -ms-transform:translateZ(-150px) translateX(150px) rotateY(90deg);
  
}
.cote2{
   background-image:url("img/fond1.jpg");
   transform:translateZ(-150px) translateX(150px) rotateY(90deg);
   -webkit-transform:translateZ(-150px) translateX(150px) rotateY(90deg);
   -moz-transform:translateZ(-150px) translateX(150px) rotateY(90deg);
   -o-transform:translateZ(-150px) translateX(150px) rotateY(90deg);
   -ms-transform:translateZ(-150px) translateX(150px) rotateY(90deg);
}
.cote3{
   background-image:url("img/fond8.jpg");
   transform:translateZ(-150px) translateX(-150px) rotateY(-90deg);
   -webkit-transform:translateZ(-150px) translateX(-150px) rotateY(-90deg);
   -moz-transform:translateZ(-150px) translateX(-150px) rotateY(-90deg);
   -o-transform:translateZ(-150px) translateX(-150px) rotateY(-90deg);
   -ms-transform:translateZ(-150px) translateX(-150px) rotateY(-90deg);
}
.cote4{
   background-image:url("img/fond3.jpg");
   transform:translateZ(-150px) translateY(150px) rotateX(-90deg);
   -webkit-transform:translateZ(-150px) translateY(150px) rotateX(-90deg);
   -moz-transform:translateZ(-150px) translateY(150px) rotateX(90deg);
   -o-transform:translateZ(-150px) translateY(150px) rotateX(-90deg);
   -ms-transform:translateZ(-150px) translateY(150px) rotateX(-90deg);
}
.cote5{
   background-image:url("img/fond4.jpg");
   transform:translateZ(-150px) translateY(-150px) rotateX(90deg);
   -webkit-transform:translateZ(-150px) translateY(-150px) rotateX(90deg);
   -moz-transform:translateZ(-150px) translateY(-150px) rotateX(90deg);
   -o-transform:translateZ(-150px) translateY(-150px) rotateX(90deg);
   -ms-transform:translateZ(-150px) translateY(-150px) rotateX(90deg);
}
.cote6{
   background-image:url("img/fond5.jpeg");
   transform:translateZ(-300px);
   -webkit-transform:translateZ(-300px);
   -moz-transform:translateZ(-300px);
   -o-transform:translateZ(-300px);
   -ms-transform:translateZ(-300px);
} 

.parent{
   position:relative;
   width:300px;
   height:300px;
   animation:AnimCube 5s linear infinite;
   transform-style: preserve-3d;
   -webkit-animation:AnimCube 5s linear infinite;
   -webkit-transform-style: preserve-3d;
   -moz-animation:AnimCube 5s linear infinite;
   -moz-transform-style: preserve-3d;
   -o-animation:AnimCube 5s linear infinite;
   -o-transform-style: preserve-3d;
   -ms-animation:AnimCube 5s linear infinite;
   -ms-transform-style: preserve-3d;
}

@keyframes AnimCube{
   from {}
   to{ transform-origin: 50% 50%; transform: rotateZ(360deg)
   rotateY(360deg) rotateX(360deg); }
}
@-webkit-keyframes AnimCube{
   from {}
   to{ -webkit-transform-origin: 50% 50%; -webkit-transform: rotateZ(360deg)
   rotateY(360deg) rotateX(360deg); }
}
@-moz-keyframes AnimCube{
   from {}
   to{ -moz-transform-origin: 50% 50%; -moz-transform: rotateZ(360deg)
   rotateY(360deg) rotateX(360deg); }
}
@-o-keyframes AnimCube{
   from {}
   to{ -o-transform-origin: 50% 50%; -o-transform: rotateZ(360deg)
   rotateY(360deg) rotateX(360deg); }
}
@-ms-keyframes AnimCube{
   from {}
   to{ -ms-transform-origin: 50% 50%; -ms-transform: rotateZ(360deg)
   rotateY(360deg) rotateX(360deg); }
}