CODEWITHSUNDEEP
csstransformationgsap
Keshao
Keshao

Reputation: 3

Css 3 translate Z not working in Firefox

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 
<script type="text/javascript">
var tl = new TimelineMax({ repeat:-1});
tl.to($('.box'), 10, {css:{transform:"translateZ(700px)"}});
tl.play();
</script>

translateZ working in chrome but not in Firefox.

Upvotes: 0

Views: 3354

Answers (1)

Jonathan Marzullo
Jonathan Marzullo

Reputation: 7031

Try setting perspective on your element or its parent for z-axis:

Working Example: http://codepen.io/jonathan/pen/HCfAi

// set perspective on parent which affects children
TweenLite.set("#wrapper", {perspective:1000});

// set transform perspective on element
TweenLite.set(".box", {transformPerspective:1000});

And you can also have GSAP add your CSS properties directly without using transform property.

var tl = new TimelineMax({repeat:-1});
// set perspective on element
tl.set($('.box'), {transformPerspective:1000});
tl.to($('.box'), 10, {css:{transform:"translateZ(700px)"}});
// translateZ could also be written like this
// tl.to($('.box'), 10, {css:{z:700}});
tl.play();

In GSAP CSS property equivalents (and camelCase):

  • translateX() = x
  • translateY() = y
  • translateZ() = z
  • rotateX() = rotationX
  • rotateY() = rotationY
  • rotateZ() = rotation
  • perspective() = perspective
  • transform: perspective() = transformPerspective

Reference GreenSock GSAP JS Forum (Thanks to Rodrigo):

http://greensock.com/forums/topic/10273-translatez-is-this-a-bug-in-chrome-and-firefox/

Upvotes: 1

Related Questions