Firefox의 3D CSS 변환, 들쭉날쭉 한 가장자리

Firefox의 3D CSS 변환, 들쭉날쭉 한 가장자리

---

" css 변환, 크롬의 들쭉날쭉 한 가장자리 "와 유사하며 3D 변환의 Firefox에서도 동일하게 발생합니다. 예 : http://jsfiddle.net/78d8K/5/ (<-기억 : Firefox )

이번에 backface-visibility는 도움이되지 않습니다 :(

어떤 생각?

---

수정 된 답변 : (댓글 후)

"해결 방법", 투명한 개요 속성을 추가하십시오 .

outline: 1px solid transparent;

Firefox 10.0.2 Windows 7에서 테스트되었습니다. http://jsfiddle.net/nKhr8/

원래 답변 : (배경색에 따라 다름)

"해결 방법", 동일한 배경색 (이 경우 흰색) 으로 테두리 속성을 추가합니다 .

border: 1px solid white;

Firefox 10.0.2 Windows 7에서 테스트되었습니다. http://jsfiddle.net/LPEfC/

---

앤티 앨리어싱 테두리를 방지하려면

아래는 나를 위해 더 잘 작동했습니다.

border: 1px solid rgba(0, 0, 0, 0.1); 

테두리가 명확하게 표시되어야한다면 @Juan의 대답을 고수하는 것이 더 좋은 해결책이 아닐 수도 있습니다.

아래는 큐브 회전의 스크린 샷입니다.

---

를 사용하는 것 외에 outline다음도 작동합니다.

box-shadow: 0 0 0 1px transparent;

---

filter:blur(.25px); 나를 위해 작동하고 너무 흐릿하게 보이지 않습니다.

예 : https://codepen.io/Grilly86/pen/QWLXBbX((S)CSS의 22 행 편집 시도)

참고 URL : https://stackoverflow.com/questions/9235342/3d-css-transform-jagged-edges-in-firefox