問題タブ [css-transforms]

3D 変換された要素を含む要素があります。Webkit では、親要素にマウスを合わせるか離すまで、親要素のコンテンツが正しく再描画されません。

マップマーカー（絶対に配置されたDIV）を追加できる遠近法のマップで構成されるアプリケーションを作成しようとしていますが、変換/3D空間で少し混乱していると思います。

以下で参照されているフィドルを例にとると、DIV 1は位置0,0（平らに置かれたとき-ボタンをクリック）にあると予想されますが、直立した位置では左側にわずかなマージンがあります（これはパースペクティブ値によって制御されるので、これを何らかの方法で補正する必要があると思いますか？）

同様に、Div2はキャンバスの極限で正しい位置にあるように見えますが、左上の値を100,100に変更すると、キャンバスの下に非表示になります。マーカーの位置を上げて、？で追加の変換を行う必要がありますか？ ？軸？もしそうなら、なぜこれはキャンバスの上にあるDiv1にとって問題ではないのですか？

http://jsfiddle.net/vEWEL/9/

だから私は静的なGoogleマップの結果を歪めようとしているので、あなたが「それを」見下ろしているように見えます. とにかく、CSS3変換を使用して動作させました:

これにより、次のことが得られます。

その辺に枠をつけたいと思っています。

追加すると

私は代わりに得る：

その境界線を適切に適用するにはどうすればよいですか? 他の CSS トリックを実行する必要がありますか? (そして、残念ながら追加した他の拡張機能に関係なく、これは Chrome と Safari でのみ機能します)。

Webkit では、3D CSS 変換セットは無期限に繰り返され、それまたは親要素がスタイリング (CSS) によって非表示になっている場合でも続行されますか?

私が尋ねる理由は、開発中のページで予想外に高い CPU 使用率が見られるためです。

この問題を診断する良い方法を誰かが知っている場合 (たとえば、タブごとのブランケット CPU 使用率ではなく、ページのどこで CPU サイクルが発生しているかを視覚化するなど)、私は非常に感謝しています。

事例証拠 (非表示の CSS アニメーションの削除) は、アニメーションがバックグラウンドで実行されていることを示唆しています。これを防ぐ方法を知っている人はいますか？

これは私のコードです: http://jsfiddle.net/bnookala/b2Yz8/3/そしてこれは結果です: http://jsfiddle.net/bnookala/b2Yz8/3/embedded/result/

動作は非常に単純です。赤い div をクリックすると、3D 変換が行われ、青い div が表示されます。ただし、 (クラスを削除して) この動作を元に戻そうとしてflipもうまくいきません。2 番目はイベントjQuery.bindを受け取りませんclick- それは赤い div によってキャプチャされています。これは、入力ボックス (青い div 内) がマウス フォーカスを受け取ることができないことからも明らかです。この問題を解決するために z インデックスを設定しようとしましたが、うまくいかないようです。

現在、次のコードを使用して x と y の両方を同じ速度で変換しています。

X 軸を Y 軸よりも遅く変換したいのですが、次のようなものを指定することは可能ですか:

前もって感謝します！

Impress.jsを使用してプレゼンテーションに取り組んでおり、iPad での使用に適応させることを考えていました。しかし、Impress が各スライドに変形を適用する方法が気になります。CSS を使用するだけでなく、変換をデータ属性として HTML に配置し、Javascript で適用します。

これは非常に複雑で難しい方法だと思います。ただし、データ属性を扱った経験はあまりないので、これについて意見を求めたいと思いました。普通にCSSを書いたほうがいいのでしょうか、それともdata属性を使うメリットの方が面倒でしょうか?

と で配置されたいくつかのナビゲーション要素がtransform: rotate()ありbox-shadowます。それらにカーソルを合わせると、それらをクリックできることを示すために少し「ポップアウト」します。Chrome と Safari (これは Webkit の問題であることを示しています) では、いくつかのナビゲーション項目にカーソルを合わせると、ボックスの影が乱れ、他のランダムな要素の一部を覆い隠します。Firefox では問題なく動作します。

私は、次の方法を理解できるのと同じくらい簡単に問題を描写するjsfiddleを作成しました。

http://jsfiddle.net/Q39eJ/1/

最初の 1 つまたは 2 つの要素にカーソルを合わせて外に出すと、実際の問題が表示されます。

私が取り組んでいるサイトには、次の問題があります。

http://temp.go-for-english.com/

(この URL が機能しない場合、URL はすぐにhttp://www.go-for-english.comに変更されます)

CSS3を使用して正常に見えるようにする回避策を誰かが見つけられる場合(ホバーでz-indexを再度設定するか、私にはよくわからない他の奇妙な回避策があるかもしれません)、私はそれを大いに感謝します: )私は本当に画像に頼りたくありません:(

アップデート：

Windows Chrome では問題なく表示されるとのことでした =\ Mac OSX 10.6 を使用しています。動作のスクリーンショットを次に示します。

http://s9.photobucket.com/albums/a74/nZifnab/?action=view¤t=Screenshot2012-01-19at13205PM.png

クライアントも Safari を使用しているため、この問題を指摘しています。

CSS3でスケーリング用に左上(0%、0%)に原点を指定し、回転用に別の原点(中央)を指定することは可能ですか? それが役立つ場合、私はwebkitでのみ作業しています。

現在、変換リストを使用しています (つまり、-webkit-transform: scale(newScale) rotate(newRotate))

しかし、途中で原点を変更することはできないようです。これを見る良い方法はありますか？現在、オブジェクトを拡大縮小してデフォルトの中心で原点を回転させると、要素の位置がオフになるため、要素をドラッグすると、カーソルは要素の左上にありますが、そうあるべきです中心に。原点を中心に変更してスケーリングすると、これは修正されますが、回転と反転に関する新しい問題が発生します。

私が理解できないように見えるほんの小さな要素であり、ここでの集合的な知識が私を正しい方向に向けてくれることを願っています.

ユーザーがdivにカーソルを合わせたときに、div内の画像を回転させたいと思います。コードの例は、http: //jsfiddle.net/mashby/eCzmj/にあります。

現在、アニメーションは、div 全体ではなく、画像自体にカーソルを合わせるとトリガーされます。

私がやりたいことを実行できるかどうかはわかりませんが、事前に確認や提案をありがとうございます!