Skip to content

Instantly share code, notes, and snippets.

@Fauntleroy

Fauntleroy/aliasing-fix.md

Last active March 28, 2024 18:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Fauntleroy/8a6d8e5f6da027f8cf2cfaa02460120e to your computer and use it in GitHub Desktop.
Save Fauntleroy/8a6d8e5f6da027f8cf2cfaa02460120e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
aliasing-fix.md

Eliminating aliasing for elements with 3D rotation applied

Sometimes, when you apply a 3D rotation to an element within a perspective parent, it will have aliased edges.

image

This can be fixed by adding outline: 1px solid transparent to the element with the transform:

.rotatedElement {
  transform: rotateY(5deg) rotateX(5deg);
  outline: 1px solid transparent;
}
image
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment