当我复制它时，来自 codepen 的 HyperSpace 对我不起作用

Question

HyperSpace 是一个简洁的演示，（我认为）只使用 css。 但是当我将 html 和 css 复制到我的目录时，it doesn't work.

问：我错过了什么？

Answer 1

CodePen demo设置为应用-prefix-free，基本是在需要的时候加前缀。

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

Answer 2

尝试将图像 http://s.cdpn.io/18515/PIA09959-1280x800.jpg 复制到您的主机并更改 css 中的 url

Answer 3

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

Answer 4

当我使用 Firefox（21.0 版）时，您的代码实现对我来说可以正常工作。 Google Chrome (ver 27.x) 不显示任何内容，IE (ver 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;
    }
}

Answer 5

在您自己的工作和/或本地使用 CodePen 代码的最简单方法是下载手写笔的 .zip 文件，该文件将为您提供手写笔的完整副本，包括您将要使用的 prefixfree.min.js 文件需要让它工作。为此，只需转到 CodePen 上的笔页面，然后单击“共享”，然后单击“Export.zip”即可下载笔。在您的计算机上解压缩文件，您将拥有使用代码所需的所有文件，包括许可证！ P.s 我喜欢 CodePen！ :)

Answer 6

这是一个 CSS 版本，可与基于 webkit（Chrome 和 Safari）、moz（firefox）和 o（opera）的 CSS3 动画、转换和关键帧（在需要时使用所有 vedor 前缀）的实现一起使用。也应该与 IE10 一起使用，因为它使用无前缀的 CSS3 名称。

Chris Coyier 在http://css-tricks.com/snippets/css/keyframe-animation-syntax/ 有一篇关于这种关键帧动画的精彩文章

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