.titre  {
color:blue;
font-size: 1.3em;

  background-color: #98da8d;
}




#conteneur {position : relative ; width : 300px ; height : 150px ; margin : 40px auto 40px auto ; 
		perspective :800px; }
@keyframes  animer
{
    from,to  { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    16%      { transform: rotateY(-90deg);                           }
    33%      { transform: rotateY(-90deg) rotateZ(90deg);            }
    50%      { transform: rotateY(-180deg) rotateZ(90deg);           }
    66%      { transform: rotateY(-270deg) rotateX(90deg);           }
    83%      { transform: rotateX(90deg);                            }
 }
.de 
{
    animation: animer linear infinite  16s;     
	transform-style: preserve-3d;
    transform-origin: 60px 60px 0;
 }
 .de div {
    position: absolute;
    width: 120px;
    height: 120px;
    border: 2px solid red;
    background:white;
    color: blue;
    line-height: 120px;
    font-size: 100px;
	text-align :center ;
  }
  .de #face1 {  transform: translateZ(60px);  }
  .de #face2 {   transform: rotateY(90deg) translateZ(60px);  }
  .de #face3 {   transform: rotateY(90deg) rotateX(90deg) translateZ(60px);  }
  .de #face4 {   transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);  }
  .de #face5 {   transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);  }
  .de #face6 {   transform: rotateX(-90deg) translateZ(60px);  }