Image not rotating in Safari

I have an image that is suppose to rotate.  Instead its flipping,  Only happening in Safari.

www.schuremediagroup.com/portfolio.html

CSS

/*Initial CSS*/
		div.flip-3d {
		-ms-perspective: 1200px; width: 30%; float: left;
		-webkit-perspective: 1200px; width: 30%; float: left;
		perspective: 1200px; width: 30%; float: left;
		}

		div.flip-3d figure {
		position: relative;
		-ms-transform-style: preserve-3d;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-ms-transition: 1s transform;
		-webkit-transition: 1s transform;
		transition: 1s transform;
		font-size: 20px;
		}
		div.flip-3d figure img {
		width: 100%; height:auto;
		}

		/*Captions*/
		div.flip-3d figure figcaption {
		position: absolute;
		width: 100%; height: 100%; top: 0;
		-ms-transform: rotateY(.5turn) translateZ(1px);
		-webkit-transform: rotateY(.5turn) translateZ(1px);
		transform: rotateY(.5turn) translateZ(1px);
		background: rgba(255,255,255,0.9);
		background: rgba(255,255,255,0.9);
		text-align: center;
		/*padding-top: 45%;*/
		-ms-opacity: 0.6;
		-webkit-opacity: 0.6;
		opacity: 0.6;
		filter: alpha(opacity=60); /* For IE8 and earlier */
		-ms-transition: 1s;
		-webkit-transition: 1s;
		transition: 1s;
		-ms-transition: 1s .5s opacity;
		-webkit-transition: 1s .5s opacity;
		transition: 1s .5s opacity;
		}
		#left span {
   	 	display: inline-block;
   		margin-top: 25%;
		}
		#middle span {
   	 	display: inline-block;
   		margin-top: 25%;
		}
		#right span {
   	 	display: inline-block;
   		margin-top: 25%;
		}
		/*Rotations*/
		div.flip-3d:hover figure {
		-ms-transform: rotateY(.5turn); /* IE 9 */
    	-webkit-transform: rotateY(.5turn); /* Chrome, Safari, Opera */
    	transform: rotateY(.5turn);
		 }
		
		div.flip-3d:hover figure figcaption { 
		-ms-opacity: 1;
		-webkit-opacity: 1;
		opacity: 1;
		filter: alpha(opacity=60); /* For IE8 and earlier */ }

Select allOpen in new window