0

I'm creating a 3D tilted frame. After creating it my fonts and my images are blurry for some reason. I tried to research the issue but no luck. Code is down bellow.

Note : When I zoom-out in edge , it's not anymore blurred , but then rotateY get highed deg. IMAGE

.testL{
  transform: perspective(1500px) rotateY(15deg) ;
  border-radius: 1rem;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
  transition: transform 1s ease 0s;
}

.testR{
  transform: perspective(1500px) rotateY(-15deg);
  border-radius: 1rem;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
  transition: transform 1s ease 0s;
}
whereiam
  • 71
  • 4
  • https://stackoverflow.com/questions/14677490/blurry-text-after-using-css-transform-scale-in-chrome – James Aug 17 '22 at 12:24
  • Tried it already , no luck. – whereiam Aug 17 '22 at 12:24
  • Have you checked out [this post](https://stackoverflow.com/questions/15464055/css-transition-effect-makes-image-blurry-moves-image-1px-in-chrome). Specifically the `image-rendering` answer. – EssXTee Aug 17 '22 at 12:38

0 Answers0