Posted August 9, 2018 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
Posted August 9, 2018 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
Posted August 9, 2018 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. 3 1 Share this post Link to post Share on other sites
Posted August 9, 2018 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
Posted August 9, 2018 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. 3 Share this post Link to post Share on other sites
Posted August 9, 2018 Ahhhh! Dang that makes perfect sense! Thanks @PointC 1 Share this post Link to post Share on other sites