jQueryアニメーションでCSS3のTransformを操作して拡大縮小／回転などを実装させるいろいろ｜BlackFlag

jQueryアニメーションでCSS3のTransformを操作して拡大縮小／回転などを実装させるいろいろ jQueryを使ったアニメーションではCSSのプロパティ値を操作することによって ページ上に様々なバリエーションのアニメーションを簡単に実装することが可能になりますが 現状（ver.1.8）のデフォルト状態でのjQueryファイルでは CSS3のTransform系の回転「rotate」や拡大縮小「scale」といった アニメーション値を操作することはできません。 そんなCSS3のTransform関連のプロパティ値を jQueryアニメーションとして操作させることを可能とするプラグインがいくつかあったので 使いやすかったものをサンプルアニメーションを交えて紹介してみます。 jquery-css-transform.js　／　jquery-animate-css-rotate-scale.js jQueryでCSS3のTransformアニメーションを操作させるプラグインはいくつかありますが その中でも使いやすかったものとして 「jquery-css-transform.js」と「jquery-animate-css-rotate-scale.js」の この2つのプラグインファイルを組み合わせて使うことで とても簡単にTransformアニメーションを実装することができました。 ・jquery-css-transform.js zachstronaut/jquery-css-transform・GitHub ・jquery-animate-css-rotate-scale.js zachstronaut/jquery-animate-css-rotate-scale・GitHub これらのプラグインを使うことによって ◆SCRIPT $(●●●●).css({transform:'rotate(360deg) scale(2)'}).animate({rotate:'0deg',scale:'1'},1000,'linear'); この様に、CSS値で「transfrom」の値をセットして 「.animate()」アニメーションで値を変化させることで 操作させることが可能になります。 これらのプラグインを使って試に作ってみた 簡単なCSSアニメーションサンプルをいくつか紹介してみます。 ※もちろんCSS3非対応ブラウザでは動作しません。。 サンプルのHTML／CSSはすべて以下の共通のものを使用します。 ◆HTML ◆CSS #container { padding: 20px 0; width: 100%; text-align: center; } #opening { top: 0; left: 0; width: 100%;

http://black-flag.net/jquery/20121024-4259.html