問題タブ [webkit-transform]

CSS と少量の JavaScript を使用して div ポップアップを作成する方法を理解しようとしています。リンクをクリックしてボックスをポップアップさせることができるようになりました。ボックスが表示されている間、その周りの画面が灰色になり、灰色をクリックするとポップアップが消えます。ただし、すぐに表示されるのではなく、フェードインすることはできません。これが私のコードです：

重要な部分は次のとおりです。

JavaScript から:

CSS から:

が JavaScript 内にある-webkit-transform:scale(.5, .5);ときに が無視され、が何もしていないことを除いて、すべてが機能しているように見えます。機能する可能性のあるものを知っていると思われる場合は、上記のコード ブロックをコピーして変更することができます。すでに完全な HTML ファイルです。pop.style.webkitTransform = "scale(1, 1)"-webkit-transition:all .5s ease-in-out;

アイデアは、次のようにフェードさせることです。

iFrame を含む div を含む Web ページがあります。div を縮小するために webkit-transform を適用しました。iOS と同様にデスクトップ ブラウザではこれは正常に機能しますが、Android 4.0.x では iFrame のコンテンツが切り詰められて表示されます。切り捨ての量は、発生するスケーリングの量に比例します。つまり、div を 0.5 に縮小すると、縮小された iFrame の 50% のみが表示されます。

このリンクは Android ストック ブラウザでテストできます。iFrame は正しい領域をカバーしていますが、表示されるコンテンツはその 50% ですらあります。興味深いことに、スケールが 1 を超える場合、この問題は発生しません。

この動作は、すべての Android 4.0 デバイスと一部の 4.1 デバイスでも必ず再現されます。

この問題の回避策を提案してください。

div の translate3d プロパティの x 値と y 値を取得する必要があります。魔女のために、以下のコードを使用します。

Chrome のインスペクターでブレークポイントを使用して値が正しいかどうかを確認すると、正常に動作しています。コードに alert() を入力すると正常に動作しますが、これら 2 つの「停止」がコードにない場合、verticalOffset と horizo​​ntalOffset の値は 0 です。

スクロール時に画像を回転させるためにこのコードを使用していますが、うまく機能しています：

私のサイトは水平方向にスクロールするので、.scrollTop の代わりに .scrollLeft を使用します。このコードはhttp://demosthenes.info/blog/718/Rotating-Elements-With-Page-Scroll-In-JQueryから取得しました。

このサイトの例には 2 つの画像があります。それらは反対方向に、異なる速度で回転しています。どうすればこれを達成できますか？デモ サイトのソースを調べたところ、-webkit-transform. ひょっとしてこれが関係してるの？誰か助けてくれませんか？

画像を反対側に回転させ、より遅い速度で回転させたい.

こんにちは、私は次のコードを持っています

Chrome では正常に動作しますが、他のブラウザでは動作しません。FF や IE などで動作させる方法を教えてください。

ジャムル

CSSでdivを反転する方法に関するこのチュートリアルを見つけました。結果はこちらでご覧いただけます。今問題は、ホバー後にパズルのピースを裏返しにして、裏側の情報が見えるようにしたいということです。今、私はcss3を扱うことにあまり強くありません。そのため、希望を実現するための助けをいただければ幸いです。

ここに私が使用しているコードがあります:

html:

CSS: