Css变换透视图兼容性

Question

最近，我在codepen https://codepen.io/joshnh/pen/paxbE上看到了这支笔，我一直在玩这个动画，但是除了chrome之外，我无法让它在任何其他浏览器上工作。我已经尝试过所有带有转换和转换的前缀。当我删除透视图(500)属性时，动画在firefox中工作，但没有达到预期的结果。据我所读，这与chrome将透视图属性应用于子元素的方式与其他浏览器不同有关。有什么工作可以让这种类型的动画在所有浏览器上运行吗？这就是我将css更改为让它在其他浏览器中工作的地方，但似乎没有任何帮助。

html {
height: 100%;
}
body {
position: absolute;
width: 100%;
height: 100%;
-moz-animation: myfade 5s;
-webkit-animation: myfade 5s;
animation: myfade 5s;
background: url("../img/screenbackground.jpg");

 }
button {
position: absolute;
top: 0.6%;
margin-left: 2%;;
border: none;
background: #3a7999;
color: #f2f2f2;
padding: 10px;
font-size: 14px;
border-radius: 5px;
opacity: 0;
box-sizing: border-box;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
transition: all 500ms ease;
}
button:hover {
background: #000000;
color: #3a7999;
box-shadow:  inset 0 0 0 3px #3a7999;
}
.imageWrapper {
background-color:transparent;
font-family: sans-serif;
font-size: 100%;
line-height: 20%;
margin: 0 auto;
padding: 1em;
width: 80%;
height: 60%;
margin-top: 3%;

}
figure {

float: left;
height: 12em;
margin: 3em;
margin-top: 1em;
margin-bottom: 0.5em;
width: 24em;
-webkit-transform: perspective(500);
-webkit-transform-style: preserve-3d;
-webkit-transition: .5s;
-moz-transform: perspective(500);
-moz-transform-style: preserve-3d;
-moz-transition: .5s;
transform: perspective(500);
transform-style: preserve-3d;
transition: .5s;
border-radius: 5px;

-webkit-animation: myflip;
-moz-animation: myflip;
-ms-animation: myflip;
animation: myflip 5s;

}
figure:hover {
-webkit-transform: perspective(500) rotateX(90deg) translateY(-48px) 
translateZ(60px);
-moz-transform: perspective(500) rotateX(90deg) translateY(-48px) 
translateZ(60px);

-ms-transform: perspective(500) rotateX(90deg) translateY(-48px) 
translateZ(60px);
transform: perspective(500) rotateX(90deg) translateY(-48px) 
translateZ(60px);

}

img {
background-color: #222;
box-shadow: 0 40px 30px -20px hsla(0,0%,0%,.25);
display: block;
height: 100%;
-webkit-transition: .5s;
 -moz-transition: .5s;
  transition: .5s;

}
figure:hover img {
box-shadow: none;
}
figcaption {
background-color: #222;
color: #fff;
padding: 1.5em;
-webkit-transform: rotateX(-90deg);
-webkit-transform-origin: 100% 0;
-webkit-transition: .5s;
 -moz-transform: rotateX(-90deg);
 -moz-transform-origin: 100% 0;
 -moz-transition: .5s;
 transform: rotateX(-90deg);
 transform-origin: 100% 0;
 transition: .5s;

}
figure:hover figcaption {
box-shadow: 0 20px 15px -10px hsla(0,0%,0%,.25);
}
h3 {
font-weight: bold;
}





@-webkit-keyframes myflip {
0% {

    -webkit-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    -moz-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    -ms-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    transform: perspective(500) rotateX(90deg)  translateZ(60px);
}
50% {
    -webkit-transform: perspective(500) rotateX(90deg)  translateZ(60px);
     -moz-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    -ms-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    transform: perspective(500) rotateX(90deg)  translateZ(60px);
}
    80% {
        -webkit-transform: perspective(500) rotateX(90deg)  
         translateZ(60px);
        -moz-transform: perspective(500) rotateX(90deg)  translateZ(60px);
        -ms-transform: perspective(500) rotateX(90deg)  translateZ(60px);
        transform: perspective(500) rotateX(90deg)  translateZ(60px);
    }
  100% {

 }
 }
 @-moz-keyframes myflip {
 0% {

    -webkit-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    -moz-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    -ms-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    transform: perspective(500) rotateX(90deg)  translateZ(60px);
  }
 50% {
    -webkit-transform: perspective(500) rotateX(90deg)  translateZ(60px);
     -moz-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    -ms-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    transform: perspective(500) rotateX(90deg)  translateZ(60px);
 }
     80% {
        -webkit-transform: perspective(500) rotateX(90deg)  
         translateZ(60px);
        -moz-transform: perspective(500) rotateX(90deg)  translateZ(60px);
        -ms-transform: perspective(500) rotateX(90deg)  translateZ(60px);
        transform: perspective(500) rotateX(90deg)  translateZ(60px);
    }
    100% {

  }
  }

   @keyframes myflip {
  0% {

    -webkit-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    -moz-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    -ms-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    transform: perspective(500) rotateX(90deg)  translateZ(60px);
  }
  50% {
    -webkit-transform: perspective(500) rotateX(90deg)  translateZ(60px);
     -moz-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    -ms-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    transform: perspective(500) rotateX(90deg)  translateZ(60px);
   }
     80% {
        -webkit-transform: perspective(500) rotateX(90deg)  
         translateZ(60px);
        -moz-transform: perspective(500) rotateX(90deg)  translateZ(60px);
        -ms-transform: perspective(500) rotateX(90deg)  translateZ(60px);
        transform: perspective(500) rotateX(90deg)  translateZ(60px);
      }
   100% {

 }
 }

  @-ms-keyframes myflip {
  0% {

    -webkit-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    -moz-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    -ms-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    transform: perspective(500) rotateX(90deg)  translateZ(60px);
  }
   50% {
    -webkit-transform: perspective(500) rotateX(90deg)  translateZ(60px);
     -moz-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    -ms-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    transform: perspective(500) rotateX(90deg)  translateZ(60px);
  }
    80% {
        -webkit-transform: perspective(500) rotateX(90deg)  
         translateZ(60px);
        -moz-transform: perspective(500) rotateX(90deg)  translateZ(60px);
        -ms-transform: perspective(500) rotateX(90deg)  translateZ(60px);
        transform: perspective(500) rotateX(90deg)  translateZ(60px);
    }
   100% {

  }
  }

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

Answer 1

CSS perspective属性作为参数，这意味着您应该使用像px这样的单元。

此外，为了让您的笔在火狐中工作，您应该添加使用的-webkit属性的无前缀版本，并在perspective属性中添加一个单元，就像在perspective(500px)中那样。见改性笔。