Css变换透视兼容性

Question

我最近在 codepen 上看到了这支笔 https://codepen.io/joshnh/pen/paxbE我一直在玩这个动画，但无法让它在 chrome 以外的任何其他浏览器上运行。我已经尝试了所有带有转换和过渡的前缀。当我删除 perspective(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 属性 accepts length as parameter ，这意味着您应该使用像 px 这样的单位。

此外，为了在 Firefox 中看到您的笔工作，您应该添加您正在使用的 -webkit 属性的无供应商前缀版本，并向 添加一个单元perspective 属性，如 perspective(500px)。参见 modified pen .