59

div 要素を回転しようとしています...これは DOM の冒涜かもしれません。canvas 要素で動作する可能性はありますか? よくわかりませんが、これがどのように機能するのか、またはなぜ機能しないのかについて誰かアイデアがあれば、ぜひ知りたいです. ありがとう。

4

7 に答える 7

24

DIV を回転するには を使用しWebkitTransform / -moz-transform: rotate(Xdeg)ます。

これは IE では機能しません。Raphael ライブラリは IEで動作し、ローテーションを行います。私はそれがcanvasesを使用していると信じています

回転をアニメーション化する場合は、再帰を使用できますsetTimeout()

おそらく、jQuery のスピンの一部を実行することもできます.animate()

要素の幅を考慮してください。表示されているコンテンツよりも幅が広いオブジェクトを回転すると、おかしな結果が得られます。ただし、要素の幅を狭くしてから回転させることはできます。

以下は、jQuery オブジェクト内の要素をローテーションする単純な jQuery スニペットです。回転を開始および停止できます。

$(function() {
    var $elie = $(selectorForElementsToRotate);
    rotate(0);
    function rotate(degree) {

          // For webkit browsers: e.g. Chrome
        $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
          // For Mozilla browser: e.g. Firefox
        $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});

          // Animate rotation with a recursive call
        setTimeout(function() { rotate(++degree); },5);
    }
});

jsFiddle の例

注:
次数を取得して大きくすると、画像が時計回りに回転します。回転度を下げると、画像が反時計回りに回転します。

于 2010-09-25T01:35:34.627 に答える
7

クロスブラウザは、任意の要素に対して回転します。IE7およびIE8で動作します。IE7ではJSFiddleで機能していないように見えますが、私のプロジェクトではIE7でも機能していました。

http://jsfiddle.net/RgX86/24/

var elementToRotate = $('#rotateMe');
var degreeOfRotation = 33;

var deg = degreeOfRotation;
var deg2radians = Math.PI * 2 / 360;
var rad = deg * deg2radians ;
var costheta = Math.cos(rad);
var sintheta = Math.sin(rad);

var m11 = costheta;
var m12 = -sintheta;
var m21 = sintheta;
var m22 = costheta;
var matrixValues = 'M11=' + m11 + ', M12='+ m12 +', M21='+ m21 +', M22='+ m22;

elementToRotate.css('-webkit-transform','rotate('+deg+'deg)')
    .css('-moz-transform','rotate('+deg+'deg)')
    .css('-ms-transform','rotate('+deg+'deg)')
    .css('transform','rotate('+deg+'deg)')
    .css('filter', 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\','+matrixValues+')')
    .css('-ms-filter', 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod=\'auto expand\','+matrixValues+')');

編集13/09/1315:00素晴らしく、簡単で、連鎖可能なjqueryプラグインにラップされています。

使用例

$.fn.rotateElement = function(angle) {
    var elementToRotate = this,
        deg = angle,
        deg2radians = Math.PI * 2 / 360,
        rad = deg * deg2radians ,
        costheta = Math.cos(rad),
        sintheta = Math.sin(rad),

        m11 = costheta,
        m12 = -sintheta,
        m21 = sintheta,
        m22 = costheta,
        matrixValues = 'M11=' + m11 + ', M12='+ m12 +', M21='+ m21 +', M22='+ m22;

    elementToRotate.css('-webkit-transform','rotate('+deg+'deg)')
        .css('-moz-transform','rotate('+deg+'deg)')
        .css('-ms-transform','rotate('+deg+'deg)')
        .css('transform','rotate('+deg+'deg)')
        .css('filter', 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\','+matrixValues+')')
        .css('-ms-filter', 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod=\'auto expand\','+matrixValues+')');
    return elementToRotate;
}

$element.rotateElement(15);

JSFiddle： http: //jsfiddle.net/RgX86/175/

于 2012-09-14T15:52:19.523 に答える
7

ええ、あなたはあまり運がないと思います。通常、主要なブラウザーが使用する 3 つの描画方法 (Canvas、SVG、VML) では、テキストのサポートが不十分だと思います。画像を回転させたい場合は問題ありませんが、フォーマットやスタイルが混在するコンテンツがある場合は、おそらくそうではありません。

クロスブラウザー描画 API については、RaphaelJSを確認してください。

于 2008-12-20T02:51:49.100 に答える
1

これを支援するための 2 つの jQuery パッチを次に示します (これを読んでいるときにはすでに jQuery に含まれている可能性があります)。

于 2012-04-18T01:12:23.227 に答える
0

DOM/CSS を使用して要素を回転できるとは思えません。あなたの最善の策は、キャンバスにレンダリングして回転させることです（詳細は不明です）。

于 2008-12-20T00:16:39.273 に答える