Html codepen中的超空间不'；当我复制它时，它对我不起作用

这是一个只使用css的简洁演示。 但是当我将html和css复制到我的目录时

---

问：我遗漏了什么？

尝试将图像复制到主机并更改css中的url

这可能是缺少浏览器前缀的问题。还有一个版本的前缀是-moz和-webkit。

当我使用Firefox（版本21.0）时，你的代码实现对我来说是正确的。Google Chrome（27.x版）没有显示任何内容，IE（10版）显示了反复放大的图像

CSS3属性“透视”、“变换”和“动画”可能是造成这种情况的原因。我能推荐的最好方法是复制这些属性并添加变体。为了避免猜测，下面是推荐的编辑

注意：CSS3仍然相对较新，即使添加了这些功能，我怀疑它在所有现代浏览器中都能起到相同的作用。Opera和IE9或更低版本无法进行3D转换，透视属性也不太受支持

.wall{
    background: url(http://s.cdpn.io/18515/PIA09959-1280x800.jpg);
    background-size: cover;
}

    html, body{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body{
    background: #000;
    text-align: center;
}

body:before{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.scene{
    display: inline-block;
    vertical-align: middle;
    perspective: 5px;
    perspective-origin: 50% 50%;
    opacity: 0;
    animation: fadeIn 3s 1 linear;
    animation-fill-mode: forwards;
    position: relative;

    /* Safari / Chrome */
    -webkit-animation: fadeIn 3s 1 linear;
    -webkit-animation-fill-mode: forwards;
    -webkit-perspective: 5px;
    -webkit-perspective-origin: 50% 50%;
}

.wrap{
    position: absolute;
    width: 1000px;
    height: 1000px;
    left: -500px;
    top: -500px;
    opacity: 0;
    transform-style: preserve-3d;
    animation: move 12s infinite linear;
    animation-fill-mode: forwards;

    /* Safari / Chrome */
    -webkit-transform-style: preserve-3d;
    -webkit-animation: move 12s infinite linear;
    -webkit-animation-fill-mode: forwards;
}

.wrap:nth-child(2){
    animation: move 12s infinite linear;
    animation-delay: 6s;

    /* Safari / Chrome */
    -webkit-animation: move 12s infinite linear;
    -webkit-animation-delay: 6s;
}

.wall {
    width: 100%;
    height: 100%;
    position: absolute;
}

.wall-right {
    transform: rotateY(90deg) translateZ(500px);

    /* Safari / Chrome */
    transform: rotateY(90deg) translateZ(500px);
}

.wall-left {
    transform: rotateY(-90deg) translateZ(500px);

    /* Safari / Chrome */
    transform: rotateY(-90deg) translateZ(500px);
}

.wall-top {
    transform: rotateX(90deg) translateZ(500px);

    /* Safari / Chrome */
    -webkit-transform: rotateX(90deg) translateZ(500px);
}

.wall-bottom {
    -webkit-transform: rotateX(-90deg) translateZ(500px);

    /* Safari / Chrome */
    -webkit-transform: rotateY(-90deg) translateZ(500px);
}

.wall-back {
    -webkit-transform: rotateX(180deg) translateZ(500px);

    /* Safari / Chrome */
    -webkit-transform: rotateX(180deg) translateZ(500px);
}

@keyframes move {
    0%{
        transform: translateZ(-500px) rotate(0deg);
        opacity: 0;
    }
    25%{
        opacity: 1;
    }
    75%{
        opacity: 1;
    }
    100%{
        transform: translateZ(500px) rotate(0deg);
        opacity: 0;
    }
}

/* Safari / Chrome */
@-webkit-keyframes move {
    0%{
        -webkit-transform: translateZ(-500px) rotate(0deg);
        opacity: 0;
    }
    25%{
        opacity: 1;
    }
    75%{
        opacity: 1;
    }
    100%{
        -webkit-transform: translateZ(500px) rotate(0deg);
        opacity: 0;
    }
}

@keyframes fadeIn {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

/* Safari / Chrome */
@-webkit-keyframes fadeIn {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

---

CodePen演示被设置为apply，这基本上是在必要时添加前缀

---

您可以在项目中添加-prefix free（我不建议这样做），也可以在必要时添加前缀。

以下是一个CSS版本，它将与基于webkit（Chrome和Safari）、moz（firefox）和o（opera）的CSS3动画、转换和关键帧实现（需要时使用所有vedor前缀）一起使用。还应与IE10配合使用，因为它使用前缀较少的CSS3名称

Chris Coyier在上有一篇关于这种关键帧动画的文章

---

在您自己的工作和/或本地使用CodePen中的代码的最简单方法是下载该笔的.zip文件，该文件将为您提供该笔的完整副本，包括使其工作所需的prefixfree.min.js文件。要做到这一点，只需转到CodePen上的pens页面，单击“共享”，然后单击“Export.zip”下载该笔。解压您计算机上的文件，您将拥有使用代码所需的所有文件，包括许可证！我爱密码笔！：）

这取决于您使用的浏览器，请参见：我建议在所有情况下现在都使用autoprefixer选项。永远不要用户前缀免费，它会减慢你的网站。

.wall{
  background: url(http://s.cdpn.io/18515/PIA09959-1280x800.jpg);
  background-size: cover;
}

html, body{
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body{
  background: #000;
  text-align: center;
}

body:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.scene{
  display: inline-block;
  vertical-align: middle;
  -webkit-perspective: 5px;
  -moz-perspective: 5px;
  -o-perspective: 5px;
  perspective: 5px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -o-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
  opacity: 0;
  -webkit-animation: fadeIn 3s 1 linear;
  -moz-animation: fadeIn 3s 1 linear;
  -o-animation: fadeIn 3s 1 linear;
  -animation: fadeIn 3s 1 linear;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  position: relative;
}

.wrap{
  position: absolute;
  width: 1000px;
  height: 1000px;
  left: -500px;
  top: -500px;
  opacity: 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: move 12s infinite linear;
  -moz-animation: move 12s infinite linear;
  -o-animation: move 12s infinite linear;
  animation: move 12s infinite linear;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.wrap:nth-child(2){
  -webkit-animation: move 12s infinite linear;
  -webkit-animation-delay: 6s;
}

.wall {
  width: 100%;
  height: 100%;
  position: absolute;
}

.wall-right {
  -webkit-transform: rotateY(90deg) translateZ(500px);
  -moz-transform: rotateY(90deg) translateZ(500px);
  -o-transform: rotateY(90deg) translateZ(500px);
  transform: rotateY(90deg) translateZ(500px);
}

.wall-left {
  -webkit-transform: rotateY(-90deg) translateZ(500px);
  -moz-transform: rotateY(-90deg) translateZ(500px);
  -o-transform: rotateY(-90deg) translateZ(500px);
  transform: rotateY(-90deg) translateZ(500px);
}

.wall-top {
  -webkit-transform: rotateX(90deg) translateZ(500px);
  -moz-transform: rotateX(90deg) translateZ(500px);
  -o-transform: rotateX(90deg) translateZ(500px);
  transform: rotateX(90deg) translateZ(500px);
}

.wall-bottom {
  -webkit-transform: rotateX(-90deg) translateZ(500px);
  -moz-transform: rotateX(-90deg) translateZ(500px);
  -o-transform: rotateX(-90deg) translateZ(500px);
  transform: rotateX(-90deg) translateZ(500px);
}

.wall-back {
  -webkit-transform: rotateX(180deg) translateZ(500px);
  -moz-transform: rotateX(180deg) translateZ(500px);
  -o-transform: rotateX(180deg) translateZ(500px);
  transform: rotateX(180deg) translateZ(500px);
}

@-webkit-keyframes move{
  0%{
    -webkit-transform: translateZ(-500px) rotate(0deg);
    opacity: 0;
  }
  25%{
    opacity: 1;
  }
  75%{
    opacity: 1;
  }
  100%{
    -webkit-transform: translateZ(500px) rotate(0deg);
    opacity: 0;
  }
}

@-moz-keyframes move{
  0%{
    -moz-transform: translateZ(-500px) rotate(0deg);
    opacity: 0;
  }
  25%{
    opacity: 1;
  }
  75%{
    opacity: 1;
  }
  100%{
    -moz-transform: translateZ(500px) rotate(0deg);
    opacity: 0;
  }
}

@-o-keyframes move{
  0%{
    -o-transform: translateZ(-500px) rotate(0deg);
    opacity: 0;
  }
  25%{
    opacity: 1;
  }
  75%{
    opacity: 1;
  }
  100%{
    -o-transform: translateZ(500px) rotate(0deg);
    opacity: 0;
  }
}


@keyframes move {
  0%{
    -moz-transform: translateZ(-500px) rotate(0deg);
    -o-transform: translateZ(-500px) rotate(0deg);
    transform: translateZ(-500px) rotate(0deg);
    opacity: 0;
  }
  25%{
    opacity: 1;
  }
  75%{
    opacity: 1;
  }
  100%{
    -moz-transform: translateZ(500px) rotate(0deg);
    -o-transform: translateZ(500px) rotate(0deg);
    transform: translateZ(500px) rotate(0deg);
    opacity: 0;
  }
}

@-webkit-keyframes fadeIn {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

@-o-keyframes fadeIn {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

@keyframes fadeIn {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}