
.perspective{
  perspective: 3000px;
  perspective-origin: 400px 0px;
  /* border: solid black 1px; */
  transform-style: preserve-3d;
  transform: scale(0.5);
  width: 90%;
  height: 600px;
}

.sol{
  position: absolute;
  background-image: radial-gradient(#0000 60%,rgb(255, 255, 255) 95%), url("../images/rocheMinecraft2.jpg");
  background-size: cover;
  top: 437px;
  left: -400px;
  width: 2000px;
  height: 1180px;
  transform: rotateX(90deg) translateY(-600px);
  transform-origin: top;
}
.marqueRouge1{
  position: absolute;
  background-color: red;
  top: 437px;
  left: 300px;
  width: 3px;
  height: 30px;
  transform: rotateX(90deg) translateY(110px) translateZ(0px);
  transform-origin: top;
  z-index: 4;
}
.marqueRouge2{
  position: absolute;
  background-color: red;
  top: 437px;
  left: 286px;
  width: 30px;
  height: 4px;
  transform: rotateX(90deg) translateY(125px) translateZ(0px);
  transform-origin: top;
  z-index: 4;
}
.ombre{
  position: absolute;
  background: radial-gradient(rgba(0, 0, 0, 0.596) 40%,rgba(255, 255, 255, 0) 70%);
  background-size: cover;
  top: 431px;
  left: -20px;
  width: 580px;
  height: 370px;
  transform: rotateX(90deg) translateY(-50px);
  transform-origin: top;
}
.foreuse{
  position: absolute;
  top: 5px;
  left: 500px;
  transform-style: preserve-3d;
}
.corps{
  position: absolute;
  top: 200px;
  left: 86px;
  transform-style: preserve-3d;
  transform: rotateZ(0deg);
  transform-origin: 80px 177px;
}

.machinerie{
  transform-style: preserve-3d;
}

.panneauG{
  background-image: url("../images/panneauJaune.png");
  background-size: cover;
  background-position: center;
  clip-path: polygon(176px 0px, 345px 0, 345px 107.5px, 61.8px 107.5px, 61.8px 69.4px);

  /* background-color: yellow; */
  width: 346px;
  height: 108px;
  position:absolute;
  transform: translateZ(249px);
}
.panneauD{
  clip-path: polygon(176px 0px, 345px 0, 345px 107.5px, 61.8px 107.5px, 61.8px 69.4px);
  background-color: yellow;
  width: 346px;
  height: 108px;
  position:absolute;
  /* transform: translateZ(249px); */
}
.structure{
  /* clip-path: polygon(345px 107.5px, 345px 0px, 367.4px 0px, 367.4px 145.6px, 76.2px 179.2px, 76.2px 129.9px, 0 129.9px, 0 107.5px); */
  clip-path: polygon(345px 107.5px, 345px 0px, 367.4px 0px, 367.4px 129.9px, 0 129.9px, 0 107.5px);
  background-color: rgb(88, 150, 179);
  width: 368px;
  height: 130px;
  position:absolute;
}
.structureG{
  transform: translateZ(0px);
}
.structureD{
  transform: translateZ(249px);
}
.soubassement{
  clip-path: polygon(367.4px 129.9px, 367.4px 145.6px, 76.2px 179.2px, 76.2px 129.9px);
  background-color: rgb(58, 101, 121);
  width: 368px;
  height: 180px;
  position:absolute;
}
.soubassementG{
  transform: translateZ(216px);
}
.soubassementD{
  background-color: rgb(50, 87, 104);
  transform: translateZ(34px);
}
.soubassementAv{
  background-color: rgb(58, 101, 121);
  width: 182px;
  height: 50px;
  top: 130px;
  left: 76px;
  position:absolute;
  transform: translateZ(34px) rotateY(-90deg) ;
  transform-origin: left;
}
.toitArr{
  clip-path: polygon(176px 0px, 367px 0, 367px 250px, 176px 250px);
  background-color: rgb(255, 255, 152);
  width: 367px;
  height: 250px;
  position:absolute;
  transform: rotateX(90deg);
  transform-origin: top;
}
.toitAv{
  clip-path: polygon(42px 0px, 176px 0, 176px 250px, 42px 250px);
  background-color: rgb(243, 243, 103);
  width: 176px;
  height: 250px;
  position:absolute;
  transform: rotateX(90deg) rotateY(-31.2deg);
  transform-origin: top right;
}
.plancher{
  background-color: rgb(140, 165, 177);
  clip-path: polygon(0px 0px, 62px 0px, 62px 250px, 0px 250px);
  width: 62px;
  height: 250px;
  position:absolute;
  transform: rotateX(90deg) translateZ(-108px);
  transform-origin: top;
}
.panneauAv{
  background-color: rgb(196, 196, 0);
  clip-path: polygon(0px 0px, 38px 0px, 38px 250px, 0px 250px);
  width: 62px;
  height: 250px;
  top: 132px;
  left: 108px;
  position:absolute;
  transform: rotateX(90deg) rotateY(90deg) translateZ(-108px);
  transform-origin: top right;
}
.structureAv{
  background-color: rgb(82, 136, 161);
  clip-path: polygon(0px 0px, 22px 0px, 22px 250px, 0px 250px);
  width: 62px;
  height: 250px;
  top: 170px;
  left: 46px;
  position:absolute;
  transform: rotateX(90deg) rotateY(90deg) translateZ(-108px);
  transform-origin: top right;
}
.axeG{
  background-color: rgb(124, 123, 123);
  width: 36px;
  height: 65px;
  top: 43px;
  position:absolute;
  transform: translateZ(136px);
}
.axeD{
  background-color: rgb(105, 105, 105);
  width: 36px;
  height: 65px;
  top: 43px;
  position:absolute;
  transform: translateZ(114px);
}
.structureArr{
  background-color: rgb(104, 177, 211);
  width: 250px;
  height: 130px;
  top: 0px;
  left: 367px;
  position:absolute;
  transform: rotateY(-90deg);
  transform-origin: left;
}
