DS928
asked on
Image Flip Not Working In Safari / Explorer
The link www.schuremediagroup.com/portfolio.html
The CSS
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; }
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I added this for the rotation. It rotates in Explorer but not in Safari.
ASKER
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);
ASKER
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; }
ASKER
Open in new window