3D Transforms not working in Safari / Firefox / IE11

[dada78]

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!

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

[dada78]

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!

[PointC]

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.

 

[dada78]

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!

[PointC]

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.

 

[dada78]

Ahhhh! Dang that makes perfect sense! Thanks @PointC