は、私がここにこの効果を実験してきた視差効果

Question

に変換：

https://codepen.io/PressOnThis/pen/NbmGPR

考え方があるが、あなたは最初の移行（またはその欠如に気付くでしょう、この時点で）は、カーソルがdivに入るとブロックになります。マウスの位置を無期限にキャプチャする前にタイムアウトのようないくつかのことを試しましたが、まだ滑らかな移行を達成するためにはまだ苦労しています。 mousemoveでマウスの位置を取得する必要があるため、ここではCSSの移行は無意味です。

どうすればこの問題を解決できますか？

Answer 1

ピクチャスケーリングの進捗状況に応じてピクチャ回転の角度を小さくしようとしました。チェックアウト：https://codepen.io/pitetsky/pen/qqwOvB。

コメントなしのコードは最適ではありません。そのコードは少しの実験の産物です。ですから、私が何をしたのか一言で言えば、

pic-centerスケーリングの進捗の商によってrotateXとrotateYを乗算するのが最適です。厳しい点は、画像のスケーリングがCSS transitionで行われていることです。

特別なライブラリを持たないJSアニメーションよりもブラウザでCSSのトランジションが細かく機能するため、JSへのイメージのスケーリングは移動しませんでした。

代わりに、mouseenterの画像には、0秒間に0から1までのわずかに値scaleTransitionProgressが変更されます。これは、CSSのトランジションの長さと同じです。同様にmouseleaveの1から0まで。そして、mousemoveを追跡するとき、私はこの値に応じて減衰を調整します。

他のコードは、以前の進行中、またはマウスがまだ進行中のときに、他の画像にマウスが入るときに発生するいくつかの問題の排除に役立ちます。

質問がある場合は私にご相談ください。