私は次のコードを持っています：http： //jsfiddle.net/RFMxG/1/
トランジションが実行されると、左側に約20〜30ピクセルのパディングが表示されます。変換原点を0,0,0に設定したにもかかわらず、y軸を中心に正しく回転していません。青いボックスの左端は、アニメーション中は常に左端と同じ高さにする必要があります。
誰かが私が間違ったことを教えてもらえますか？
質問する
206 次
2 に答える
0
さて、ここにはたくさんの問題があります：
1) CSS 変換は、トランジションを使用してアニメーション化できません。遷移可能なプロパティの W3Cリストを見ると、transform がないことに気付くでしょう。
2)-webkit-perspective要素自体ではなく、適用される要素の子にのみ影響します。これに関するSafariブログを読んでください：
-webkit-perspective の興味深い点は、要素に直接影響を与えないことです。代わりに、その要素の変換された子孫の 3D 変換の外観に影響します。これは、子孫変換に乗算される変換を追加するものと考えることができます。これにより、これらの子孫は移動するときにすべて同じ視点を共有できます。
3) フィドルを投稿したことは素晴らしいことですが、これは CSS の問題であるため、今後の参考のために、すべての JavaScript を削除して、1 セットのブラウザー プレフィックスのみを使用すると、はるかに簡単になります。私たちがあなたを助けるのを手伝ってください！
4) おそらく使いたいのはアニメーションです。ホバーで動作するフィドルの高度に変更されたバージョンを次に示します。
5) JavaScript があなたのスキル セットであり、ブラウザーの互換性についてまったく心配している場合 (もちろんあなたはそうです!)、これらの種類のアニメーションをjstweenで行うことを強くお勧めします。
于 2012-05-31T02:40:31.513 に答える
0
そうです、ソリューションは実際には、アニメーションの開始前に変換原点を設定する必要があるという事実によるものでした (-webkit-transform プロパティの設定と同時に設定することはできません)。
これが正しく機能することを示すために、フィドルを更新しました。 http://jsfiddle.net/RFMxG/5/
于 2012-09-26T15:40:48.703 に答える