cssが回転します。 IEで可能

簡単に説明します。
css transform:IEのrotateプロパティは使用できません。
しかし、誰もがprogidフィルターがあることを知っています:DXImageTransform.Microsoft.Matrix 、もちろん画像を回転させます。 しかし、それはまったく正しくないとしましょう。
このフィルターの使用に関する記事の99%には、このようなフレーズが含まれています。
フィルター:変換行列
左:?
そうだね?
* ps:左と右は経験的に

これは実際にはそうではありません。

ここに数キロメートルのコードを挿入しません。
私はメインに自分自身を制限します

1.角度を計算する
var rad = (angle * Math.PI) / 180.0;
cos = Math.cos(rad),
sin = Math.sin(rad);


2.変換マトリックスを取得する
var filter='progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11 = ' + cos + ', M12 = ' + (-sin) + ', M21 = ' + sin + ', M22 = ' + cos + ')';

3.この時点で、XとYの特定の組み合わせが得られます
もちろん、最も単純な行列演算を実行し、この非常に望ましいオフセットを取得できますが、実際にはさらに簡単にできます (行列はすべて長い間忘れられていたと思います)

最初に、要素の寸法を覚えておく必要があります。
そして、ターンの後-元のサイズと比較した現在のサイズのデルタにシフトし、2で割った。

すなわち

var sizeopt={
w:test.width(),
h:test.height()
};
.....
//
var w=test.width();
var h=test.height();
//
test.css({'margin-left':-Math.round((w-sizeopt.w)/2),'margin-top':-Math.round((h-sizeopt.h)/2)});


クリーンソース

IE以外の例を開くことは意味がありません。
美しい恋人たち-css - cssSandpaperを介して回転を制御する機能を含む、より標準的なソリューションがあります。そこには、回転する要素の周りの古典的な数学とさまざまな回避策ラッパーがあります。 しかし、多くのコードがあります。 個人的には仕事のために。

PS:人生は美しい、ツイストしないでください

Source: https://habr.com/ru/post/J107183/


All Articles