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：人生は美しい、ツイストしないでください

All Articles

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

More articles: