将3D-Cube嵌入到另一个站点不起作用

Question

I have successfully created a 3D-Image-Cube with HTML and CSS. It is perfectly fine on an empty page or on my information page itself.

I embed my information page on my main page with success too, but the cube is not showing up there at all. The div itself is shown in the Inspector, but with 0 height.

3D-Image-Cube on information site (at the bottom)

3D-Image-Cube on main page (below the 4 features)

/* HTML */
<div id="containercube" style="transform:scale(0.5)">
 <div id="cube" class="animatecube">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
 </div>
</div>

-

/*CSS*/

@-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 25s infinite linear;
  -moz-animation    : spinningH 25s infinite linear;
  -o-animation      : spinningH 25s infinite linear;
  -ms-animation     : spinningH 25s infinite linear;
  animation         : spinningH 25s infinite linear;
}

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

  -webkit-transition  : -webkit-transform 25s linear;
  -moz-transition     : -moz-transform 25s linear;
  -o-transition       : -o-transform 25s linear;
  -ms-transition      : -ms-transform 25s linear;
  transition          : transform 25s 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>div {
  position: absolute;
  height: 360px;
  width: 360px;
  padding: 0;
  margin: 0;
  background-position:center center;
}

#cube div:nth-child(1) {
  -webkit-transform : translateZ(200px) scale(1.125);
  -moz-transform    : translateZ(200px) scale(1.125);
  -o-transform      : translateZ(200px) scale(1.125);
  -ms-transform     : translateZ(200px) scale(1.125);
  transform         : translateZ(200px) scale(1.125);
  background: #f4f4f4 url("http://relaxer.info/wp-content/uploads/faszientraining-relaxer-aktivita-5-1024x1024.jpg") no-repeat;
  background-size:contain;
}

#cube div:nth-child(2) {
  -webkit-transform : rotateY(90deg) translateZ(200px) scale(1.125);
  -moz-transform    : rotateY(90deg) translateZ(200px) scale(1.125);
  -o-transform      : rotateY(90deg) translateZ(200px) scale(1.125);
  -ms-transform     : rotateY(90deg) translateZ(200px) scale(1.125);
  transform         : rotateY(90deg) translateZ(200px) scale(1.125);
  background: #f4f4f4 url("http://relaxer.info/wp-content/uploads/faszientraining-relaxer-aktivita-6-1024x1024.jpg") no-repeat;
  background-size:contain;
}

#cube div:nth-child(3) {
  -webkit-transform : translateZ(200px) scale(1.125);
  -moz-transform    : translateZ(200px) scale(1.125);
  -o-transform      : translateZ(200px) scale(1.125);
  -ms-transform     : translateZ(200px) scale(1.125);
  transform         : translateZ(200px) scale(1.125);
  background: #f4f4f4 url("http://relaxer.info/wp-content/uploads/faszientraining-relaxer-aktivita-1-1024x1024.jpg") no-repeat;
  background-size:contain;
}

#cube div:nth-child(4) {
  -webkit-transform : rotateY(-90deg) translateZ(200px) scale(1.125);
  -moz-transform    : rotateY(-90deg) translateZ(200px) scale(1.125);
  -o-transform      : rotateY(-90deg) translateZ(200px) scale(1.125);
  -ms-transform     : rotateY(-90deg) translateZ(200px) scale(1.125);
  transform         : rotateY(-90deg) translateZ(200px) scale(1.125);
  background: #f4f4f4 url("http://relaxer.info/wp-content/uploads/faszientraining-relaxer-aktivita-2-1024x1024.jpg") no-repeat;
  background-size:contain;
}

#cube div:nth-child(5) {
  -webkit-transform : rotateX(-90deg) translateZ(200px) rotate(180deg) scale(1.125);
  -moz-transform    : rotateX(-90deg) translateZ(200px) rotate(180deg) scale(1.125);
  -o-transform      : rotateX(-90deg) translateZ(200px) rotate(180deg) scale(1.125);
  -ms-transform     : rotateX(-90deg) translateZ(200px) rotate(180deg) scale(1.125);
  transform         : rotateX(-90deg) translateZ(200px) rotate(180deg) scale(1.125);
  background: #f4f4f4 url("http://relaxer.info/wp-content/uploads/faszientraining-relaxer-aktivita-4-1024x1024.jpg") no-repeat;
  background-size:contain;
}

#cube div:nth-child(6)  {
  -webkit-transform : rotateX(90deg) translateZ(200px) scale(1.125);
  -moz-transform    : rotateX(90deg) translateZ(200px) scale(1.125);
  -o-transform      : rotateX(90deg) translateZ(200px) scale(1.125);
  -ms-transform     : rotateX(90deg) translateZ(200px) scale(1.125);
  transform         : rotateX(90deg) translateZ(200px) scale(1.125);
  background: #f4f4f4 url("http://relaxer.info/wp-content/uploads/faszientraining-relaxer-aktivita-3-1024x1024.jpg") no-repeat;
  background-size:contain;
}

Answer 1

Its because you missed some css for #containercube in mainpage. Add following css to mainpage

#containercube {
-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%;
}
.animatecube {
-webkit-animation : spinningH 25s infinite linear;
-moz-animation    : spinningH 25s infinite linear;
-o-animation      : spinningH 25s infinite linear;
-ms-animation     : spinningH 25s infinite linear;
animation         : spinningH 25s infinite linear;
}
#cube{
    position: relative;
    margin: 0 auto;
    height: 400px;
    width: 400px;
    -webkit-transition: -webkit-transform 25s linear;
    -moz-transition: -moz-transform 25s linear;
    -o-transition: -o-transform 25s linear;
    -ms-transition: -ms-transform 25s linear;
    transition: transform 25s 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;
}