takempf/aliasing-fix.md

Last active March 28, 2024 18:43

Select an option

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/takempf/8a6d8e5f6da027f8cf2cfaa02460120e.js"></script>
Save takempf/8a6d8e5f6da027f8cf2cfaa02460120e to your computer and use it in GitHub Desktop.

Raw

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.

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;
}