I'm having trouble trying to hide the backface of a 3D rotating div that contains text. I'm actually rotating a container div that contains a div with an SVG graphic and a div with text. The text backface is not hiding when the div rotates. Here is the abridged code:
<div id="Q1"> <div id="Q1img"><img src="images/Q1.svg" alt=""/></div> <div id="Q1outerText">Stages of Change</div> </div>
var $Q1 = $("#Q1"), $Q1outerText = $("#Q1outerText"), tl; tl = new TimelineMax(); tl.set($Q1outerText, {backfaceVisibility:"hidden",transformStyle: "preserve-3d"}) .to($Q1, 2, {transformOrigin:"right top", rotationY:135, delay:2, transformStyle: "preserve-3d", zIndex:10, ease:Power1.easeOut});