Css转换透视兼容性

Question

我最近在codepen上发现了这支笔https://codepen.io/joshnh/pen/paxbE 我一直在玩这个动画但是我无法让它在Chrome以外的任何其他浏览器上运行。我尝试过所有带变换和转换的前缀。当我删除perspective（500）属性时，动画在firefox中工作，但没有所需的结果。从我读过的内容来看，chrome与其他浏览器不同地将perspective属性应用于子元素的方式有所不同。有没有什么方法可以让这种类型的动画在所有浏览器中运行？ 这就是我已经改变了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 ld.gold属性accepts length as parameter，这意味着您应该使用ld.bfd之类的单位。

此外，为了让您的笔在Firefox中运行，您应该添加您正在使用的perspective属性的免费供应商前缀版本，并为px添加一个单元财产，如-webkit。请参阅modified pen。