要素を3D回転させて注目を集められるjQueryプラグイン「rotate3Di」
2010年11月30日-![はてなブックマーク](http://b.hatena.ne.jp/entry/image///phpspot.org/blog/archives/2010/11/3djqueryrotate3.html)
スポンサード リンク
jQuery Plugin: rotate3Di - Flip HTML content in 3D - zachstronaut
要素を3D回転させて注目を集められるjQueryプラグイン「rotate3Di」。
次のように、四角い要素にカーソルを合わせると回転します。
Chromeだと本当に滑らかに動いてインタラクティブ要素として面白い効果を付けられます。
![](http://phpspot.net/php/webimager/admin3/data/54581afc74de7219a80ea41205c6bcbd.png)
次のように、要素に対して rotate3Di メソッドを実施するだけ。
第一引数は回転のdegreeで、第二引数はdurationとなります。
$('#rot-ex').rotate3Di(180, 3000);
デモにあるような小さいものではなく、もっと大きな要素を回転させると大きなインパクトが得られそうです。
対応していないブラウザでは何も起りませんが、なかなか面白いプラグインですね。
関連エントリ
要素を3D回転させて注目を集められるjQueryプラグイン「rotate3Di」。
次のように、四角い要素にカーソルを合わせると回転します。
Chromeだと本当に滑らかに動いてインタラクティブ要素として面白い効果を付けられます。
![](http://phpspot.net/php/webimager/admin3/data/54581afc74de7219a80ea41205c6bcbd.png)
次のように、要素に対して rotate3Di メソッドを実施するだけ。
第一引数は回転のdegreeで、第二引数はdurationとなります。
$('#rot-ex').rotate3Di(180, 3000);
デモにあるような小さいものではなく、もっと大きな要素を回転させると大きなインパクトが得られそうです。
対応していないブラウザでは何も起りませんが、なかなか面白いプラグインですね。
関連エントリ
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- 個性的な明朝フリーフォント「築豊初号明朝OFL」
- CSSで太陽が差し込むようなアニメーション実装
- 可愛くアニメーションする「beautifully crafted animated icons」
- アイソメトリックなアイコンがアイコンがPNG,SVGでゲットできる「Isoicons」
- ユニークなカタカナフォントtorisippo
- 美しいメッシュグラデーションをCSSで簡単に取得できる「MSHR」
- TailwindCSSなサイトで使える100以上のアニメーションエフェクト「animata」
- SVG形式のテック系企業のロゴを簡単にゲットできる「Svgl」
- 統一感のある色味を一括生成できるツール「The good colors」
- くちばしフォント【商用可】
- 過去のエントリ