dada78

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?

 

Thanks!

Share this post


Link to post
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;

 

 

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

Share this post


Link to post
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. 

 

 

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

Share this post


Link to post
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?

Thanks!

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Ahhhh! Dang that makes perfect sense! Thanks @PointC

  • Like 1

Share this post


Link to post
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.