3D-Cubeを別のサイトに埋め込むことができません

Question

HTMLとCSSで3D-Image-Cubeを作成しました。 空のページや自分の情報ページ自体には問題ありません。

私の情報ページも私のメインページに埋め込まれていますが、キューブはまったく表示されません。 div自体はInspectorに表示されますが、高さは0です。

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

そのあなたはメインページに#containercubeためのいくつかのCSSを逃したので。次のCSSをメインページに追加

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