Css transform perspective compatibility - css

Question

I recently came across this pen on codepen https://codepen.io/joshnh/pen/paxbE
I have been playing around with this animation but am unable to get it working on any other browser other than chrome. I have tried all prefixes with transform and transitions. when I remove the perspective(500) property the animation works in firefox but not with the desired results. From what I've read it is something to do with the way chrome applies the perspective property to child elements differently than other browsers. Is there any work around to getting this type of animation working across all browsers?
This is what I have changed the css to in order to get it working in other browsers but nothing seems to help.
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

The CSS perspective property accepts length as parameter, which means you should use a unit like px.
Also, in order to see your pen working in Firefox, you should add the vendor-prefix-free version of the -webkit properties you're using and add a unit to the perspective property, like in perspective(500px). See modified pen.