Devotee007

Rotate text like a3D cube

Recommended Posts

Hi, 

 

I'm trying to do a text animation like the one they have don in this YouTube-video in the end:

 

Been trying a lot of different values on rotationX,  transformPerspective and transformOrigin", but I just can't make it work. :-/ Any help to get started in the right direction would be very appreciated.

Share this post


Link to post
Share on other sites

Check out this lil' library >
http://mbmedia.cc/stuff/dom3d

Docs >
http://mbmedia.cc/stuff/post-assets/dom3d/docs/index.html

You can probably use the example they have right there on the page. Obviously adjust the width of the cube. Add your text to the appropriate faces. Hide the div content other than the text, make background transparent, etc etc (the faces of the cubes are divs). Then just use GSAP to spin it in 3D using the Dom3D props (rotX, rotY, etc...just read the docs). You can probably use just about everything in the example. Check the docs and read the OrthoFace section.

TweenMax.to(cube, 1, {rotX:200 etc etc etc});

When you're done, it'd be great to post a working example here for others as well. I'm sure there will be others asking this too.

  • Like 1

Share this post


Link to post
Share on other sites

Thanks for your tip Davi! I have tried to do one with the DOM3D props now. I get it to spin, but I can't figure out how to get the space between the letters as in the video above. Don't have a Codepen account, but I have attached the thing I've done in the post.

 

 

test-with-3d.zip

Share this post


Link to post
Share on other sites

Not entirely sure what you mean by "space between the letters". If you mean a gap between the text above and below, try adding the text to a div container within each face, and making each container taller.

As far as your animation goes, you may want to try recreating the cube using PaperElement3D and have one side of the face blank, and the other side with the text. This way you don't see the text on the other side of the 'cube' as it's spinning. So make the sides of the cube using PaperElement3D, adjust positioning of the faces, and then use Group3D to spin as a whole.

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.