CSS3의 ROTATE3D 부정확성은

는 사람이 속성을 변환 CSS3에 의해 생성 된 부정확성에 대한 해결책을 알고 있나요 : rotate3d (또는 rotateX, rotateY, rotateZ)?CSS3의 ROTATE3D 부정확성은

함수 I 이러한 CSS3 특성을 이용하여 큐브를 생성 및 AM

.. 매트릭스 [cos(angle) sin(angle) -sin(angle) cos(angle) someOtherTrigForZ(angle) someOtherTrigForZ(angle)]에 회전 각을인가하여 소자의 위치를 계산하면 큐브 A를 회전 후 (this jsfiddle에서 id=cube 요소를 검사한다면 화살표 키를 사용하여 몇 번) (계산 된 스타일을 살펴보면) rotate3d 행렬이 계산 스타일에 숫자 고정 (일종의 반올림 방법)을 적용하지 않는다는 것을 알 수 있습니다.

-webkit-transform: matrix3d(0.7, 0, 0, 0, 0, 0.04943792709533707, -0.6982520256787774, 0, 0, 0.6982520256787774, 0.04943792709533707, 0, 0, 0, 0, 1);

내가 얻는 결과는 정렬되지 않은 요소가 잘못되었습니다. 큐브 얼굴의 테두리를 보면 육안으로 볼 수 있습니다.

내 경계가 고르지 않도록 삼각법 계산을 부드럽게 처리하는 방법을 알고있는 사람이 있습니까?

출처

2012-12-12 Justin McDonald

당신이 말하는 것에 대해 확실하지 않습니다 ... 제가 알 수있는 한, 가장자리가 완벽하게 정렬되어 있습니다. 나는 큐브를 몇 분 동안 각 방향으로 회전 시켰고 식별 할 수없는 오정렬을 볼 수 없었다. (그리고 나는이 것들에 대해 까다 롭다). 현재 Safari (버전 6.0.2 (8536.26.17))에서 테스트되었으며 동일한 결과를 보이는 야간에 상당히 최근의 WebKit입니다. –

jsfiddle에서 큐브면의 CSS 클래스는 테두리가 border:1px solid black;으로 설정되어 있습니다. 실제로는 얼굴의 각 가장자리에 픽셀을 추가하고 있습니다. 너비와 높이 모두에 2px가 추가되었습니다. 나는 이것이 불균형의 원인이라고 생각한다. CSS 클래스에 CSS 속성 -webkit-box-sizing: border-box;을 추가하면 잘못 정렬되어야합니다.

출처

2013-01-19 01:55:57

CSS3의 ROTATE3D 부정확성은

답변

관련 문제