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

Question

我已经成功创建了一个带有 HTML 和 CSS 的 3D-Image-Cube。在空白页面或我的信息页面本身上都很好。

我也成功地将我的信息页面嵌入到我的主页上，但立方体根本没有出现在那里。div 本身显示在 Inspector 中，但高度为 0。

/* 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;
}

score 0 · Accepted Answer

这是因为您错过了主页中#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;
}

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

1 回答 1

Related

Reference