我最近在 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;
}
}
最佳答案
CSS perspective
属性 accepts length
as parameter ,这意味着您应该使用像 px
这样的单位。
此外,为了在 Firefox 中看到您的笔工作,您应该添加您正在使用的 -webkit
属性的无供应商前缀版本,并向 添加一个单元perspective
属性,如 perspective(500px)
。参见 modified pen .
关于Css变换透视兼容性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49491185/