Question

<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在Chrome中工作，但在Firefox中没有。

Answer 1

尝试在元素上设置perspective或为z轴设置其父级：

工作示例：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});

您还可以让GSAP直接添加您的CSS属性，而无需使用transform属性。

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();

在GSAP CSS属性等价物（和camelCase）中：

translateX（）= x
translateY（）= y
translateZ（）= z
rotateX（）= rotationX
rotateY（）= rotationY
rotateZ（）= 轮播
perspective（）= 观点
transform：perspective（）= transformPerspective

参考GreenSock GSAP JS论坛（感谢Rodrigo）：

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

Css 3翻译Z在Firefox中不起作用

1 个答案: