Animation qui ne fonctionne pas sous Firefox

Bonjour,
Je suis en train de travailler sur des .hover avec rotations 3d. C'est OK sur Chrome et Safari mais inactif sur Firefox Quelqu'un aurait-il une idée ?
Voici mes CSS :

body {
	background-color: #f6f6f6;
	background-image: -webkit-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,0) 50%,  hsla(0,0%,0%,.015) 50%, hsla(0,0%,0%,.015) 100%),  -webkit-radial-gradient(hsla(0,0%,0%,.05) 10%, transparent 15%);
	background-size: 1.5em 1.5em, .5em .5em;
	font-family: sans-serif;
	font-size: 100%;
	line-height: 1.5;
	margin: 0 auto;
	padding: 1.5em;
	width: 45em;
	top: 0px;
	left: 0px;
	right: 0px;
}
figure {
	float: left;
	height: 6em;
	margin: 1.5em;
	width: 12em;
	-webkit-transform: perspective(500);
	-moz-transform: perspective(500);
	-ms-transform: perspective(500);
	transform: perspective(500);
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: .5s;
	-moz-transition: .5s;
	-ms-transition: .5s;
	transition: .5s;
	top: 0px;
}
figure:hover {
	-webkit-transform: perspective(500) rotateX(90deg) translateY(-3em) translateZ(3em);
	-moz-transform: perspective(500) rotateX(90deg) translateY(-3em) translateZ(3em);
	-ms-transform: perspective(500) rotateX(90deg) translateY(-3em) translateZ(3em);
	transform: perspective(500) rotateX(90deg) translateY(-3em) translateZ(3em);
}
img {
	background-color: #222;
	box-shadow: 0 20px 15px -10px hsla(0,0%,0%,.25);
	display: block;
	height: 100%;
	-webkit-transition: .5s;
	-moz-transition: .5s;
	-ms-transition: .5s;
	transition: .5s;
}
figure:hover img {
	box-shadow: none;
}
figcaption {
	background-color: #222;
	color: #fff;
	padding: 1.5em;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	-ms-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
	-webkit-transform-origin: 100% 0;
	-moz-transform-origin: 100% 0;
	-ms-transform-origin: 100% 0;
	transform-origin: 100% 0;
	-webkit-transition: .5s;
	-moz-transition: .5s;
	-ms-transition: .5s;
	transition: .5s;
	top: 0px;
}
figure:hover figcaption {
	box-shadow: 0 20px 15px -10px hsla(0,0%,0%,.25);
}

Merci à vous,
D.
Modifié par dhillig (12 Jul 2016 - 16:38)