Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
WW

How to fix text blurry in 3D rotation?

Recommended Posts

Hi, Guys,

 

My CodePen's here:

 

While the mouse moving on body,

there's a little blurry happening with text.

is there any possible to remove the blurry?

 

Thanks for ur kindly help.  :D

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

Link to comment
Share on other sites

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

Hi WW :)

 

pls check this out ( css & perspective ) : 

See the Pen jqWJyR by MAW (@MAW) on CodePen

  • Like 6
Link to comment
Share on other sites

Hi, Diaco,

 

Thanks for the awsome reply,

it's truly a cool & helpful reference.

 

Wish u guys have a perfect day.  :-D

Thanks!!

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

Hi, Jonathan,

 

Thanks for ur reminder.

it's really helpful.

 

Thanks!!!  :-D

  • Like 1
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.
×