1

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.

Elliptica
  • 3,928
  • 3
  • 37
  • 68
  • Did you ever find a solution to this? I'm using a Rotate component that accepts the IMG URL and the current rotation angle. Rotating the image using `transform:rotate(${rotation}deg)` results in the image being too blurry to make out... – alanphil Oct 10 '22 at 16:44
  • 1
    No, I haven't. I ended up overlaying the front card with a static "clear" card that I only show when the carousel stops moving. It's not perfect (there is a small dimensional difference between the two if you look closely), but it's better than the blur. – Elliptica Oct 13 '22 at 02:11

0 Answers0