1

IE8 でアプリケーションを動作させようとしていますが、CSS 変換を IE で適切に動作させようとしてハングアップしています。

このコードを使用して角度を計算できます。

//LEGACY IE ROTATE
var deg2radians = Math.PI * 2 / 360,
    rad = s.stone_rotation * deg2radians,
    costheta = Math.cos(rad),
    sintheta = Math.sin(rad),
    matrixValues = 'M11=' + costheta + ', M12='+ (-sintheta) +', M21='+ sintheta +', M22='+ costheta;

次に、インライン スタイルを使用してインライン スタイルで MS フィルターを設定します。

element.style.cssText =  "filter:progid:DXImageTransform.Microsoft.Matrix(" + matrixValues + ")";

ただ、IEは原点を保持していないので、回転はするのですが、アイテムの位置が適切ではありません。シルベスターや他のいくつかのjQueryプラグインなど、いくつかのプラグイン/ライブラリを調べています。しかし、ライブラリなしでこれをすべて構築しているので、私はむしろこれを自分で動作させたいと思っています。

原点を適切に設定するには、数学の助けが必要です。各オブジェクトの上/左/幅/高さの変数 (上、左、imgW、imgH) があります。

もちろん、CSS3 側のものはすべて正常に動作し、変換元と回転を使用するだけで、マトリックスはそれほど難しくありませんでしたが、基準点を作成する方法がわかりません。

ありがとう！

4

2 に答える 2

0

javascript ライブラリを使用して IE8 以下を修正できます

http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

そしてCSSを使い続ける

#o1 {
    position: absolute;
    top: 25px;
    left: 25px;
    border: solid 1px black;
    position: absolute;
    width: 100px;
    height: 100px;
    padding: 10px;
    background-color: white;
    -sand-transform: rotate(45deg);
}

キーワード-sand-transformのみを使用

で例を見ることができます

http://www.useragentman.com/tests/cssSandpaper/rotateTest.html

于 2016-06-17T02:17:57.887 に答える
0

要素の中心に原点を設定しようとしている場合は、次のようなものを使用できます。

rotate = function (degrees) {

    while (degrees > 360) {
        degrees -= 360;

    }

    while (degrees < 0) {
        degrees += 360;

    }

    var matrix = element.filters.item("DXImageTransform.Microsoft.Matrix"),
        degrees = degrees,
        rad = (degrees * Math.PI) / 180,
        costheta = Math.cos(rad),
        sintheta = Math.sin(rad);

    matrix.M11 =  costheta;
    matrix.M12 = -sintheta;
    matrix.M21 =  sintheta;
    matrix.M22 =  costheta;

    rad %= Math.PI;
    if (rad > Math.PI / 2) rad = Math.PI - rad;

    costheta = Math.cos(rad),
    sintheta = Math.sin(-rad);

    element.style.top = y + Math.floor((h - h * costheta + w * sintheta) / 2) + 'px';
    element.style.left = x + Math.floor((w - w * costheta + h * sintheta) / 2) + 'px';

}

それは私自身のライブラリからのもので、完璧ではありませんが、少なくとも私にとっては十分です.

于 2012-12-13T21:48:28.723 に答える