4

css3変換属性rotate3d（またはrotateX、、 ）によって生成される不正確さの解決策を知っている人rotateYはいますrotateZか？

この関数は、回転角を行列に適用することによって要素の位置を計算し[cos(angle) sin(angle) -sin(angle) cos(angle) someOtherTrigForZ(angle) someOtherTrigForZ(angle)]ます。

私はこれらのcss3属性を使用して立方体を作成していますが、このjsfiddleid=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);

私が得ている結果は、整列していない不十分に描画された要素です。立方体の面の境界線を見ると、これは肉眼で見ることができます。

三角法の計算をスムーズにして、境界線が途切れないようにする方法を知っている人はいますか？

4

1 に答える 1

1

リンクした jsfiddle では、立方体面の css クラスに境界線が設定されていますborder:1px solid black;。これは、面の各エッジに実際にピクセルを追加しています。これは、幅と高さの両方に追加された 2px です。これがズレの原因になっていると思います。css プロパティ-webkit-box-sizing: border-box;を face クラスに追加すると、ずれが修正されるはずです。

于 2013-01-19T01:55:57.353 に答える