CODEWITHSUNDEEP
reactjsrotationcarouselblurpreserve-3d
Elliptica
Elliptica

Reputation: 4322

Why Does Text Blur on 3D Rotation in React?

I'm creating an image carousel for React that I style and rotate using the code found here: https://3dtransforms.desandro.com/carousel

When I first load the carousel things are nice and clear, but as soon as I rotate it, everything blurs (even once motion has stopped), except the item in the original 0-degree position when it finally rotates back around to the front. I tried using -webkit-filter: blur(0); but that doesn't have an impact. Any idea how I can avoid the text blurring?

Before: enter image description here

After: enter image description here

I've isolated it to this transform call:

transform: rotateY( ${(props : any) => props.yAngle}deg ) translateZ(${(props : any) => props.zAmount}px)

Since if I put 0 for the props.yAngle everything is clear but if there's any degree that's not zero there, it all becomes blurred.

Upvotes: 1

Views: 168

Answers (0)

Related Questions