3

ボトルの画像は2つ（表と裏）しかありませんが、ある種の回転効果を作成したいと思います。私はこれをjqueryまたはCSSだけで行う方法を考えようとしていました-おそらくぼかしを使って。良い方法を考えることができませんでした。

彼らはボタンを押してボトルの反対側を見たいと思っています（そこに到達するために回転します）。

これをどのように行うことができるかについてのアイデアはありますか？

4

4 に答える 4

3

CSSCokeの例をご覧ください。それはあなたがいくつかの迅速な結果を得るのを助けるか、少なくとも新しいアイデアの基盤として役立つかもしれません。（ここでは英語ですが、何が起こっているのかが少しわかりやすくなっています）。これに必要な唯一のJSは、実際の「スクロール」を実行することです。

于 2012-07-16T16:52:02.050 に答える
0

たとえば、jQueryトランジットライブラリhttp://ricostacruz.com/jquery.transit/を使用してこれを行うことができます。

$('button').on('click', function(){
  $('.bottle').transition({
    perspective: '100px',
    rotateY: '180deg'
  });
});
于 2012-07-16T16:52:01.433 に答える
0

最初の画像 (前面) の左余白の幅を から にアニメーション化width: 300px; margin-left: 0pxしwidth: 0px; margin-left: 150pxます。アニメーションが完了したら、2 番目のイメージを からwidth: 0px; margin-left: 150pxまでアニメーション化しwidth: 300px; margin-left: 0pxます。

.animate()この目的で使用できます: http://api.jquery.com/animate/

これがあなたの質問に答えたことを願っています。

于 2012-07-16T16:55:30.550 に答える
0

http://css3.bradshawenterprises.com/cfimg/

ボタンを使用したクロスフェードのデモ 2 をチェックしてください。回転させるには、次のようなものを追加します。

transform:rotatey(180deg);
}
于 2012-07-16T17:00:31.740 に答える