問題タブ [webkit-transform]

まず第一に、私の問題を説明するための jsfiddle があります: http://jsfiddle.net/EKxkx/ なぜ jsfiddle では css 翻訳が chrome でしか機能しないのかわかりませんが、ライブ バージョンでは問題はここに示すように、Firefox で表示できます: http://helveticventure.com/startupweekend/v4/test.html

ez-css フレームワーク (ez-css.org) を使用しています。次のレイアウトで：

-webkit-transform: translate(0, 30px); を配置すると、ブロック 2 と 3 の両方に対して、同じように動作しません。

ブロック 2 がブロック 4 の上を移動しているときに、ブロック 3 がブロック 4 の下を移動しています。私がアーカイブしたい動作は、ブロック 3 で使用されているオンです。両方のブロックがブロック 4 の下を移動しています。しかし、どうすればよいかわかりません。 .

ご協力いただきありがとうございます！

エリック

画像を反転するコードを以下に記述しました。を設定-webkit-transform=rotateY(180deg)していますが、やはりclickイベントで画像を元の位置に戻したいです。値を試し-180ましたが、機能していません。

助けてください。

Webkit アニメーションを使用して単純な雨の効果を適用しようとしています。iPad 2 では問題なく正常に動作しますが、新しい Retina ディスプレイ iPad では動作が非常に遅くなります。

iOS で 3D 変換を使用してハードウェア アクセラレーションをトリガーするという言及を見たことがありますが、このクラスに直接適用するとアニメーションが停止します。これらが違いを生むかどうかさえわかりません。

この質問は、 iOS Webkit animation performance has only on retina displayの複製である可能性があることは承知していますが、それはずっと前に尋ねられ、実際の結論はありませんでした。

この問題の解決策はありますか? または、パフォーマンスをわずかに向上させるものはありますか?

の正確な表示高さを見つけるためのjQueryソリューションはありますか-webkit-transform: scale(0.7851);

値は異なる場合があるscaleため、適切なソリューションを探しています

これらのオプションをテストしましたが、残念ながらまだ解決策が見つかりませんでした:(

この問題は、数学の基礎を 1 つだけ修正できると思います ;)

divで使用するtransformと、絶対配置が期待どおりに機能しなくなり、手動で計算する必要があるようです。たとえば、div をコンテナーの下部に配置する場合は、次のようにします。

ただし、この div を変換する-webkit-transform:rotateX(angle);と、コンテナーの下部にはなりません。コンテナの中間の場所は、そのサイズによって異なります。

これを説明するために jsfiddle を作成し、達成しようとしていることも示します: http://jsfiddle.net/9NHJt/

私が使用するコードは次のとおりです。

それで、javascriptなしでこれを修正する方法はありますか? または、jsで正しいボトム位置を計算する方法は?

iPad で背景画像が正しくレンダリングされないという問題がありました。問題を解決した提供された回答は、問題を解決したが別の問題を引き起こしたに追加-webkit-transform: translateZ(0);することでした。id1 つのページ (非常に長いページ) で、ページの途中でコンテンツの読み込みが停止します。問題を削除する-webkit-transform: translateZ(0);と停止します (バックグラウンドの問題も再発します)。-webkit-transform: translateZ(0);がページの読み込みを妨げているのはなぜですか?

Webkit-transform を使用した CSS:

ノート：

• これは、iOS 6.1.3 を実行している iPad Mini で発生します。
• この問題は、iPhone 4 (iOS の同じバージョン) または Chrome では発生しません。
• これは Safari 5.1 で大きな問題を引き起こします (私は Windows を実行しています)。

固定divに表示される画像があります。

-webkit-transform プロパティを使用して、スケーリングされた画像にスケーリングして移動します (他のブラウザーは必要ありません。webkit だけです)。すべての作業は javascript/jquery で行われています。ナビゲーションはどの方向にも機能します。最大縮尺ズームは 10 です。

例えば：

すべて正常に動作します。

難しさは別の場所にあります。

画像には丸印が付いています。この点の座標とその半径 (例: X-100px、Y-100px、R-10px) を知っています。これらの座標は画像に関連しています。

質問：

画像がスケーリングされている場合、この円の点が表示されるかどうかを判断するにはどうすればよいですか? 画像のどの領域が表示されているかを判断するにはどうすればよいですか? サイズ変更された状態で実際の座標を特定するにはどうすればよいですか。希望を示す例の画像を見てください。

アップデート：

残念ながら、以下に示す解決策は完全には正しくありません。height() の jquery 値とスケール レートを乗算すると、正確な結果が得られません。私は自分で解決策を見つけました。次の javascript (jquery ではない) プロパティがあります。

element.getBoundingClientRect

このプロパティは、サイズ変更された画像の実際の寸法を反映し、実際の位置の実際の座標を返します。jquery での使用法は次のとおりです。

将来この問題に直面する人たちに役立つことを願っています:)

コードを使用して要素の -webkit-transform プロパティを変更しています。ただし、トランジション アニメーションを再生せずにこれを実行したいと考えています。たとえば、スライドを介さずに transformX(-300px) から transformX(0) に移動したいと考えています。これは私がこれまでに持っているコードですが、効果がありません。「list-style-type」を none に設定する必要があります。そうしないと、ステップ関数が実行されません。

何か案は？