HyperSpace from codepen doesn't work for me when I copy it

StackOverflow https://stackoverflow.com/questions/16619521

  •  29-05-2022
  •  | 
  •  

Question

HyperSpace is neat demo that (I think) only uses css. But when I copy the html and css to my directory, it doesn't work.

Q: What am I missing?

Was it helpful?

Solution

The CodePen demo is set to apply -prefix-free, which basically adds the prefixes when necessary.

Screenshot of codepen using -prefix-free

Either you add -prefix-free to your project (which I don't recommend) or add the prefixes when necessary.

OTHER TIPS

Try copying the image http://s.cdpn.io/18515/PIA09959-1280x800.jpg to your hosting and changing the url in the css

It could be an issue with missing browser prefixes. There's another version with -moz and -webkit prefixes here.

Your implementation of the code works correctly for me when I use Firefox (ver 21.0). Google Chrome (ver 27.x) does not show anything, and IE (ver 10) shows the image zooming in repeatedly.

The CSS3 properties "perspective", "transform" and "animation" are likely to be the cause of this. The best thing I can recommend is to copy each of these properties and add the variants. To take the guess work out of it, below would be the recommended edits.

Note: CSS3 is still relatively new, even with these additions, I doubt this will work the same in all modern browsers. Opera and IE9 or below cannot do 3D transformations and the perspective property isn't supported very well.

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

The easiest way to use code from CodePen in your own work and/or locally is to download a .zip file of the pen which will give you a full copy of the Pen including the prefixfree.min.js file that you will need to make it work. To do this simply go to the pens page on CodePen and click 'Share' then 'Export.zip' to download the Pen. Unzip the file on your computer and you will have all the files you need to use the code including a licence! P.s I love CodePen! :)

Here is a version of the CSS that will work with webkit (Chrome and Safari), moz (firefox) and o (opera) based implementations of the CSS3 animation, transformation and keyframes (using all vedor prefixes where needed). Should also work with IE10 as it uses the prefix-less CSS3 names for these.

Chris Coyier has a great article on this kind of keyframe animation at 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;
  }
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top