画像を使わずにアニメーション時計を作ろうとしています。私はそれのほとんどを正しくすることができました。ただし、針の 1 つが 12 に達すると、文字盤の一番下までジャンプしてから徐々に上に移動し、3 を指す正しい位置に到達します。これは IE8 でのみ発生します。これを修正する方法はありますか？
これは HTML ファイルです: https://dl.dropboxusercontent.com/u/39330021/Test/CSS3-JS-Clock-3.htm
問題を示すスクリーンショット:
フォールバックとして IE8 マトリックス フィルターで CSS3 回転を使用していると思います。MS マトリックス フィルターの動作は少し異なります。回転した要素のバウンディング ボックスが拡張され、回転前よりも多くの場所が表示されます。バウンディング ボックスのアンカー ポイントは左上にあるため、画像 (またはその他のコンテンツ) は正しい変換に合わせてさらに下と右に移動します。ボックスを水平方向および垂直方向に移動して、この動きを補正する必要があります。それほど簡単な作業ではありません。
静的処理:インターネット上には、静的な例
に役立つリソースがいくつかあります。
動的処理:
動的な目的のために、本当に IE8 をサポートする必要がある場合は、GSAP をお勧めします。これは、有名な Greensock の ActionScript 3 から JS へのライブラリ ポートです。私はそれが変換元を補償していることを知っており、IE8 での回転には互換性のあるソリューションがあります。
わかりました、自分で考え出しました。angleなるたび270にIEが作ってくれました-90。そのため、 未満の場合に追加する行を追加360しました。angle0