Image Flip Not Working In Safari / Explorer

The link   www.schuremediagroup.com/portfolio.html

The CSS
div.flip-3d {
		perspective: 1200px; width: 30%; float: left;
		}

		div.flip-3d figure {
		position: relative;
		transform-style: preserve-3d;
		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;
		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%;*/
		opacity: 0.6;
		transition: 1s;
		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 { transform: rotateY(.5turn); }
		div.flip-3d:hover figure figcaption { opacity: 1; }

Open in new window

DS928Asked:
Who is Participating?
 
Kim WalkerConnect With a Mentor Web Programmer/TechnicianCommented:
Safari uses webkit. There's a series of additional CSS properties for webkit which is basically just adding the "-webkit-" suffix to the standard property. Include the -webkit- property in addition to the CSS3 property. Here's a good reference.
0
 
DS928Author Commented:
In Explorer it flips but the transparency is not behaving.  In Safari it does not flip and the transparency is not behaving as well.  I did this for the transparency...

opacity: 0.6;
opacity-webkit: 0.6;

Open in new window

0
 
DS928Author Commented:
I added this for the rotation. It rotates in Explorer but not in Safari.
0
 
DS928Author Commented:
ooops.  Forgot the code!
/*Rotations*/
		div.flip-3d:hover figure { /*transform: rotateY(.5turn);*/
		-ms-transform: rotateY(.5turn); /* IE 9 */
    	-webkit-transform: rotateY(.5turn); /* Chrome, Safari, Opera */
    	transform: rotateY(.5turn);

Open in new window

0
 
DS928Author Commented:
I have gone through the code.  Working better but the flip isn't happening in Safari but the transparent is.  The transparent is working in explorer 11 but not the flip.  mercy.

/*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;
		-ms-transition: 1s;
		-ms-transition: 1s .5s opacity;
		-webkit-transition: 1s;
		-webkit-transition: 1s .5s opacity;
		transition: 1s;
		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 { opacity: 1; }

Open in new window

0
All Courses

From novice to tech pro — start learning today.