Embedding 3D-Cube zu einer anderen Seite funktioniert nicht

Question

Ich habe erfolgreich einen 3D-Image-Cube mit HTML und CSS erstellt. Es ist völlig in Ordnung auf einer leeren Seite oder auf meiner Informationsseite selbst.

Ich bette meine Informationsseite mit Erfolg auf meine Hauptseite ein, aber der Würfel wird dort gar nicht angezeigt. Das div selbst wird im Inspector angezeigt, aber mit 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

Sein, weil Sie einige CSS für #containercube in Hauptseite verpasst. Fügen Sie folgende css zur Hauptseite

#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; 
} 

hinzu