Not working 3D

Not working after Firefox 54

by Anthony S

HTML

<div id='stage' style=' width: 25px; margin: 1em auto; height: 208px;'>
<div id='spinner'>
<a href=zDEV/ target='newWindow0'>
<img width=128 height=128 style='transform: rotateY(0deg) translateZ(289px); -webkit-transform: rotateY(0deg) translateZ(289px); -moz-transform: rotateY(0deg) translateZ(289px); padding: 4px 4px;' src='https://homepages.cae.wisc.edu/~ece533/images/fruits.png' alt='(Development)'>
</a>
<a href=/ASWebUI/Address.php target='newWindow1'>
<img width=128 height=128 style='transform: rotateY(26deg) translateZ(289px); -webkit-transform: rotateY(26deg) translateZ(289px); -moz-transform: rotateY(26deg) translateZ(289px); padding: 4px 4px;' src='https://homepages.cae.wisc.edu/~ece533/images/fruits.png' alt='Address Book'>
</a>
<a href=/ASWebUI/Entertain.php target='newWindow2'>
<img width=128 height=128 style='transform: rotateY(51deg) translateZ(289px); -webkit-transform: rotateY(51deg) translateZ(289px); -moz-transform: rotateY(51deg) translateZ(289px); padding: 4px 4px;' src='https://homepages.cae.wisc.edu/~ece533/images/fruits.png' alt='Entertainment'>
</a>
<a href=http://www.facebook.com target='newWindow3'>
<img width=128 height=128 style='transform: rotateY(77deg) translateZ(289px); -webkit-transform: rotateY(77deg) translateZ(289px); -moz-transform: rotateY(77deg) translateZ(289px); padding: 4px 4px;' src='https://homepages.cae.wisc.edu/~ece533/images/fruits.png' alt='Facebook'>
</a>
<a href=/ASWebUI/FBook.php target='newWindow4'>
<img width=128 height=128 style='transform: rotateY(103deg) translateZ(289px); -webkit-transform: rotateY(103deg) translateZ(289px); -moz-transform: rotateY(103deg) translateZ(289px); padding: 4px 4px;' src='https://homepages.cae.wisc.edu/~ece533/images/fruits.png' alt='Finance Book'>
</a>
<a href=/ASWebUI/Fitness.php target='newWindow5'>
<img width=128 height=128 style='transform: rotateY(129deg) translateZ(289px); -webkit-transform: rotateY(129deg) translateZ(289px); -moz-transform: rotateY(129deg)...

CSS

@-webkit-keyframes spinner {
	from {
		-webkit-transform: rotateY(0deg);
	}
	to {
		-webkit-transform: rotateY(-360deg);
	}
}

@keyframes spinner {
	from {
		-moz-transform: rotateY(0deg);
		-ms-transform: rotateY(0deg);
		transform: rotateY(0deg);
	}
	to {
		-moz-transform: rotateY(-360deg);
		-ms-transform: rotateY(-360deg);
		transform: rotateY(-360deg);
	}
}

#stage {
	perspective: 1200px;
	margin: 1em auto;
	transform-style: preserve-3d;
	-webkit-perspective: 1200px;
	-moz-perspective: 1200px;
	-ms-perspective: 1200px;
}

#spinner {
	-webkit-animation-name: spinner;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 6s;

	animation-name: spinner;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 6s;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

#spinner:hover {
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
}

#spinner img {
	position: absolute !important;
	border: 1px solid #ccc;
	box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}