Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

3D Transforms not working in Safari / Firefox / IE11

Recommended Posts

Hi guys,

for some reason I can't get the 3d transform perspective working on my splittext animation - see codepen...

It only seems to be working in Chrome / Mac. Any ideas?



See the Pen wxRGJa by dada78 (@dada78) on CodePen

Link to comment
Share on other sites

I think I found the answer by adding the perspective with browser prefixes to the css:

  -webkit-perspective: 200px;
		-ms-perspective: 200px;
		perspective: 200px;


See the Pen YjdpRo by dada78 (@dada78) on CodePen


Still wondering why it wouldn't work if I just have the perspective set on the banner div? Thanks!

Link to comment
Share on other sites

Hi @dada78 :)


The reason it didn't work on the banner element is because it's not the parent. When you split the text into divs, the #txt1 element is the parent of all those new divs. If you set the perspective to 200 on the #txt1 div you'll see that it works without the extra CSS browser prefixes. 


See the Pen jpXyvp by PointC (@PointC) on CodePen


Also note that's exactly what you were doing with your extra CSS. You added them to the #txt1 div and not to the banner. That's why it worked. Hopefully that makes sense. Happy tweening.



  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Thanks @PointC!


I tried 


.set(txt1, {perspective:200})


before by using the variable name, but that didn't work, so I didn't even try applying it to the element id, because shouldn't it work the same way when using the variable name instead?


Link to comment
Share on other sites

The variable txt1 and the element #txt1 are not the same in this case. The variable txt1 is an {object}.


Try a console.log(txt1) and you'll see the chars array, elements array and all the other properties that make up the SplitText. Does that make sense?


Happy tweening.



  • Like 3
Link to comment
Share on other sites

Ahhhh! Dang that makes perfect sense! Thanks @PointC

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.