2

CSS3 を使用して画像を回転させようとしていrotateYます。jQueryを使用して回転角度を取得する必要があります。

私の問題は、画像が何回回転したかを理解することです。

例：

180 degrees: matrix3d(-1, 0, -0.00000000000000012246467991473532, 0, 0, 1, 0, 0, 0.00000000000000012246467991473532, 0, -1, 0, 0, 0, 0, 1) 
360 degrees: matrix3d(1, 0, 0.00000000000000024492935982947064, 0, 0, 1, 0, 0, -0.00000000000000024492935982947064, 0, 1, 0, 0, 0, 0, 1)
540 degrees: matrix3d(-1, 0, -0.00000000000000036739403974420594, 0, 0, 1, 0, 0, 0.00000000000000036739403974420594, 0, -1, 0, 0, 0, 0, 1) 
720 degrees: matrix3d(1, 0, 0.0000000000000004898587196589413, 0, 0, 1, 0, 0, -0.0000000000000004898587196589413, 0, 1, 0, 0, 0, 0, 1)

180 度ごとにわかるように、3 番目の要素の絶対値は 0.0000000000000012246467991473532 を加算します。私はこの結果に満足していますが、ある時点でこの論理は破綻し、適用できなくなります。

追加される 4 番目のサイクルの番号の後、ランダムになります。

回転サイクル数を取得する正しい方法は何ですか?

4

1 に答える 1

0

-------------------------- TL;DR ------------------- -----

function getRotationCycle (domElement, axis) {

    var computedStyle = window.getComputedStyle(domElement),
        matrixStyle = computedStyle.transform || computedStyle.WebkitTransform || computedStyle.MozTransform || computedStyle.msTransform || computedStyle.OTransform || computedStyle.KhtmlTransform;

    if (!matrixStyle || matrixStyle.substr(0, 9) !== 'matrix3d(') {
        //return 0; //????
        throw "Something's wrong with 3D transform style. Probably no style applied at all OR unknown CSS3 vendor OR unknown/unsupported 3D matrix representation string OR CSS3 3D transform is not fully supported in this browser";
    }

    var matrix = WebKitCSSMatrix && (new WebKitCSSMatrix(matrixStyle)) || 
                 MozCSSMatrix && (new MozCSSMatrix(matrixStyle)) || 
                 MsCSSMatrix && (new MsCSSMatrix(matrixStyle)) || 
                 OCSSMatrix && (new OCSSMatrix(matrixStyle)) ||     
                 CSSMatrix && (new CSSMatrix(matrixStyle)));

    if (!matrix || isNaN(matrix.a) || isNaN(matrix.b) || isNaN(matrix.c)) {
        //not sure about all versions of FireFox
        throw "Could not catch CSSMatrix constructor for current browser, OR the constructor has returned a non-standard matrix object (need [a b c] numerical properties to work)";
    }

    var rotation; 

    // todo: giving an axis array is a good idea, or we could return all three rotations if no parameter given

    switch (axis.toUpperCase()) {
        case 'X':
            rotation = Math.acos(matrix.a);
            break; 
        case 'Y':
            rotation = Math.asin(matrix.b);
            break; 
        case 'Z':
            throw "TODO: Sorry, Math people. I really need help here! Please implement this case for me. This will help you: http://9elements.com/html5demos/matrix3d/";
            //rotation = Math.acos(matrix.a);
            break;
        default:
            throw "This function accepts rotation axis name (string) as the first parameter. Possible values: 'X', 'Y', 'Z'"; 
    }

    //if (isNaN(rotation))...

    rotation *= 180/Math.PI; //getting rotation in degrees. This is good for me for debug purposes but bad for performance, of course, ...

    return rotation % 360; // ... so you can skip degrees and do it in radians only
}

いくつかの優れたドキュメントがここにあります: https://developer.mozilla.org、Google と Microsoft は役に立たないようです。

すべてはこの記事から始まりました: css3 conversion matrix3d values。開始点と数学の変換について著者に感謝します。

しかし、そこにある答えは完全ではなく、WebKit でのみ機能します。

動作するコードがプレーンな JavaScript で記述されている理由は次のとおりです。

jQuery バージョンが必要な場合は、このスニペットを使用してmatrixStyle文字列を取得します。

var matrixStyle = element$.css('transform')) || element$.css('-webkit-transform')) || element$.css('-moz-transform')) || element$.css('-ms-transform')) || element$.css('-o-transform')); // jQuery

マトリックスの各部分はここで説明されています: http://9elements.com/html5demos/matrix3d/

于 2013-09-06T12:31:47.677 に答える