<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Le meilleur site</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta name="author" content="Machin TrucChouette">    
    <meta name="description" content="description de la page 160 caractères maxi">
    <link type="image/png" href="favicon-32x32.png" rel="icon" sizes="32x32">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/script.js">
  </head>
  <body>
    <div id="container">
      <div id="cube" class="animate">
        <a href="index.html"><div id="f1"></div></a>
        <a href="serveur"><div id="f2"></div></a>
        <a href="php"><div id="f3"></div></a>
        <a href="js_jquery"><div id="f4"></div></a>
        <a href="wp"><div id="f5"></div></a>
        <a href="html_css"><div id="f6"></div></a>
      </div>
    </div>	
  </body>
</html>        
    
  body {
     margin-top: 125px;
 }

 #acceuil {
    position: relative;
    top: -110px;
 }

@-moz-keyframes spinningH {
  from {
    -moz-transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    -moz-transform: rotateX(360deg) rotateY(360deg);
  }
}

@-webkit-keyframes spinningH {
  from {
    -webkit-transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    -webkit-transform: rotateX(360deg) rotateY(360deg);
  }
}

@-o-keyframes spinningH {
  from {
    -o-transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    -o-transform: rotateX(360deg) rotateY(360deg);
  }
}

@-ms-keyframes spinningH {
  from {
    -ms-transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    -ms-transform: rotateX(360deg) rotateY(360deg);
  }
}

@keyframes spinningH {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    transform: rotateX(360deg) rotateY(360deg);
  }
}

 #container {
  -webkit-perspective : 1000px;
  -moz-perspective    : 1000px;
  -o-perspective      : 1000px;
  -ms-perspective     : 1000px;
  perspective         : 1000px;

  -webkit-perspective-origin  : 50% 50%;
  -moz-perspective-origin     : 50% 50%;
  -moz-transform-origin       : 50% 50%;
  -o-perspective-origin       : 50% 50%;
  -ms-perspective-origin      : 50% 50%;
  perspective-origin          : 50% 50%;
 }

.animate {
  -webkit-animation : spinningH 24s infinite linear;
  -moz-animation    : spinningH 24s infinite linear;
  -o-animation      : spinningH 24s infinite linear;
  -ms-animation     : spinningH 24s infinite linear;
  animation         : spinningH 24s infinite linear;
}

#cube {
  position: relative;
  margin: 0 auto;
  height: 400px;
  width: 400px;

  -webkit-transition  : -webkit-transform 2s linear;
  -moz-transition     : -moz-transform 2s linear;
  -o-transition       : -o-transform 2s linear;
  -ms-transition      : -ms-transform 2s linear;
  transition          : transform 2s linear;

  -webkit-transform-style : preserve-3d;
  -moz-transform-style    : preserve-3d;
  -o-transform-style      : preserve-3d;
  -ms-transform-style     : preserve-3d;
  transform-style         : preserve-3d;
}

#cube>a div {
  position: absolute;
  height: 360px;
  width: 360px;
  padding: 20px;
  opacity: 0.9;
  background-position:center center;
}

#f1 {
  -webkit-transform : translateZ(200px);
  -moz-transform    : translateZ(200px);
  -o-transform      : translateZ(200px);
  -ms-transform     : translateZ(200px);
  transform         : translateZ(200px);
  background-color  : #2E272F;
  background-image: url(../images/accueil.gif);
  background-repeat : no-repeat;
}

#f2 {
  -webkit-transform : rotateY(90deg) translateZ(200px);
  -moz-transform    : rotateY(90deg) translateZ(200px);
  -o-transform      : rotateY(90deg) translateZ(200px);
  -ms-transform     : rotateY(90deg) translateZ(200px);
  transform         : rotateY(90deg) translateZ(200px);
  background-color  : #2D3A4D;
  background-image: url(../images/lamp_logo.png);
  background-repeat : no-repeat;
}

#f3 {
  -webkit-transform : rotateY(180deg) translateZ(200px);
  -moz-transform    : rotateY(180deg) translateZ(200px);
  -o-transform      : rotateY(180deg) translateZ(200px);
  -ms-transform     : rotateY(180deg) translateZ(200px);
  transform         : rotateY(180deg) translateZ(200px);
  background-color  : #2D1C12;
  background-image: url(../images/php_logo.png);
  background-repeat : no-repeat;
}

#f4 {
  -webkit-transform : rotateY(-90deg) translateZ(200px);
  -moz-transform    : rotateY(-90deg) translateZ(200px);
  -o-transform      : rotateY(-90deg) translateZ(200px);
  -ms-transform     : rotateY(-90deg) translateZ(200px);
  transform         : rotateY(-90deg) translateZ(200px);
  background-color  : #693C1F;
  background-image  : url(../images/javascript_logo.png);
  background-repeat : no-repeat;
}

#f5 {
  -webkit-transform : rotateX(-90deg) translateZ(200px) rotate(180deg);
  moz-transform    : rotateX(-90deg) translateZ(200px) rotate(180deg);
  -o-transform      : rotateX(-90deg) translateZ(200px) rotate(180deg);
  -ms-transform     : rotateX(-90deg) translateZ(200px) rotate(180deg);
  transform         : rotateX(-90deg) translateZ(200px) rotate(180deg);
  background-color  : #955122;
  background-image  : url(../images/wordpress_logo.png);
  background-repeat :no-repeat;
}

#f6  {
  -webkit-transform : rotateX(90deg) translateZ(200px);
  -moz-transform    : rotateX(90deg) translateZ(200px);
  -o-transform      : rotateX(90deg) translateZ(200px);
  -ms-transform     : rotateX(90deg) translateZ(200px);
  transform         : rotateX(90deg) translateZ(200px);
  background-color  : #E34C26;
  background-image: url(../images/html5_logo.png);
  background-repeat :no-repeat;
  text-align:center;  
}