4

必要なもの:

任意の度数による背景画像のアニメートされた回転 (回転)。理想的には、アニメーションは別のアニメーションのコールバックでアクティブ化されます。

私が持っているもの：

追加の div を含む背景画像を持つコンテナー div (回転する必要があるのは画像のみであり、div または div コンテンツは必要ありません)。

用語の混乱:

jQuery では、「ローテーション」という言葉は周期的に入れ替わるという意味のようです。このスレッドの目的のための「回転」の私の定義は、z 平面を中心軸として使用するオブジェクトの角度による 2 次元回転を指します。用語が重複しているため、検索エンジンを使用してこの問題を調査することは困難です。

失望：

私は、画像や背景画像のアニメーション化された回転 (回転) のような基本的なものが標準要件であり、したがって jQuery の既定の機能であると予想していました。代わりに、私が見つけることができる最高のものは、背景画像の明らかなサポートを強調していないjquery-rotateプラグインであり、それがサポートするものは、クロスブラウザーフレンドリーでさえありません.

編集: jquery-rotate プラグインは、標準オブジェクトの CANVAS および VML にフォールバックすることにより、IE6+ およびその他の古いブラウザーをサポートしますが、背景画像のサポートについてはまだ不明です。

クロスブラウザ:

クロスブラウザのサポートは不可欠です。このため、CSS の代替または jQuery/CSS ハイブリッドの代替は、私の要件を満たしていません。少なくとも IE6+ のサポートは許容されます。

私の質問：

明らかな解決策を見落としているのでしょうか、それとも jQuery ははるかに複雑な偉業を達成できるにもかかわらず、背景画像の回転 (回転) をアニメーション化できませんか?

4

2 に答える 2

0

まず第一に、a を実際にアニメーション化する方法はありませんbackground-image— ただし、これを実現するには、別の要素を作成する必要があります (これについては脚注 1 で詳しく説明します)。

第 2 に、回転は単純な概念ではありませんが、最先端の標準に準拠した世界では、CSS3transformとを組み合わせて使用​​することで可能になりtransitionます。

第三に、IE6 はこれをエミュレートするために独自の非標準技術を使用する必要があります。VML は 1 つのオプションですが、Microsoft は実際には独自のフィルタープロパティを使用して多くの CSS3 を実装しています。トランジションはできませんが、Javascript を使用してfilterおよびtransformプロパティを時間の経過とともに動的に変更できます。

それでも、これには多くのポリフィルが必要であり、他の場所で開発されたカスタムのすぐに使えるソリューションが最善の策です。私のお勧めは、優れたCSS Sandpaperを使用することです。

1. 画像を含む別の DOM 要素を作成する

このようなものはうまくいくはずです（私<b></b>はセマンティックな含意の欠如のために使用しました）：

<div class="container">
    <b class="background"></b>
    <div class="foreground">
        [content/]
    <div>
</div>

.container, 
.foreground {
    position: relative;
}

.background {
    background: yourImage.jpg;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
}
于 2013-01-31T10:39:51.670 に答える
0

HTML キャンバスを使用した Kinetic.js は、簡単で効果的な回転機能を提供します。必要な回転角度を設定できる場所で試すことができます --- www.threeblokesfromchina.com でボールをアニメーション化するために使用しました。Google でチュートリアルを参照することもできます。

于 2013-01-31T10:02:44.840 に答える