Jump to content
Search Community

How to fix text blurry in 3D rotation?

WW test
Moderator Tag

Go to solution Solved by Diaco,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

That's just a browser rendering issue. Think of it like the browser takes a photo of the element at its native size, and then stretches/moves/rotates those pixels, so if you're rotating toward the camera those pixels kinda blow up (expand) a bit, leading to things looking blurry. A solution would be to make the native size bigger, and then scale it down so that when you rotate, there are more native pixels to work with and things stay sharper. For example, make them natively double the size, and scale them to 1/2 size and rotate that. It ends up looking the same visually, just sharper. 

  • Like 3
Link to comment
Share on other sites

Hi, Jack,

 

Thanks for ur reply.  :-D

 

I've already tried that, 

but the blurry still exsist.

this is another CodePen,

See the Pen yOeZNK by WW (@WW) on CodePen

 

the doings i've tried were:

A: set the span font-size double, and scale it to 0.5.

B: set the span font-size double, then, append a div to wrap the span and scale the wrap div to 0.5.

C: scale the span to 2, then, append a div to wrap the span and scale the wrap div to 0.5.

but, all of these not working.

 

is there something wrong?

Thanks a lot.

Link to comment
Share on other sites

Hello WW,

 

Just remember a s a rule of thumb.. anytime you rotate in rotationY or rotationX .. or even using the z property.. you need to add perspective (on the transformed elements parent) or use transformPerspective (to the element being transformed) to make it render right.

 

Also you could also add transformStyle:"preserve-3d" if you start to see flickering or no 3d type of rendering.

 

:)

  • Like 5
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.
×
×
  • Create New...