Currently, I am attempting to implement a simple cross-browser 3D CSS3 card flip effect on my testing website.
The outcome functions perfectly in Firefox; however, in WebKit, one part of the image vanishes during the rotation and also experiences noticeable flickering.
I have already compared my code with functional examples available online like
Suspecting that the z-index position of the background and perspective values of the card might be conflicting, although I haven't deduced their correlation yet.
Below is the CSS snippet I am using:
'#t02panel' represents the card with '#t2front' and '#t2back' serving as its two faces.
Even though hiding #t02back's backface (which logically should not cause any issues or be necessary) resolved the flickering in Firefox, it did not solve the problem in WebKit.
#t02front { -webkit-backface-visibility: hidden; }
#t02back { -webkit-transform: rotateY (-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); transform: rotateY(-180deg);}
#t02front, #t02back { position:absolute; z-index: 1; box-sizing: border-box;
-moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden;}
#topic02 #t02panel { -webkit-perspective: 600; -moz-perspective: 600;-o-perspective: 600; perspective: 600;
-webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5); -o-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; -o-transition: -o-transform 1s; transition: transform 1s;
-webkit-transition: all 1.0s linear; -moz-transition: all 1.0s linear; -o-transition: all 1.0s linear; transition: all 1.0s linear;}
#topic02:hover #t02panel { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg);}
Any suggestions on achieving cross-browser functionality will be greatly appreciated!