CSS3 rotate3d Inaccuracies

bicepgirl

New Member
Does anyone know of a solution to the inaccuracies produced by the css3 transform attribute: \[code\]rotate3d\[/code\] (or \[code\]rotateX\[/code\], \[code\]rotateY\[/code\], \[code\]rotateZ\[/code\])?The function computes an elements position by applying the rotation angle to the matrix \[code\][cos(angle) sin(angle) -sin(angle) cos(angle) someOtherTrigForZ(angle) someOtherTrigForZ(angle)]\[/code\]..I am creating a cube using these css3 attributes, and if you inspect the \[code\]id=cube\[/code\] element in this jsfiddle (after rotating the cube a few times using arrow keys)(look in computed styles), you can see that the rotate3d matrix does not apply any kind of number fixing (some sort of rounding method) to computed styles.\[code\]-webkit-transform: matrix3d(0.7, 0, 0, 0, 0, 0.04943792709533707, -0.6982520256787774, 0, 0, 0.6982520256787774, 0.04943792709533707, 0, 0, 0, 0, 1);\[/code\]The result I am getting is poorly drawn elements that do not line up; this is visible to the naked eye if you look at the borders on the cube's faces.Does anyone know of a way to smooth out/round the trigonometry calculations so that my borders aren't choppy?
 
Back
Top