問題タブ [css-transforms]

で奇妙な問題が発生してい-webkit-transformます。perspective要素を「フリップアップ」するためにとを使用するとrotateX、要素が十分に高ければ、特定の角度を超えるとちらつくか、まったくレンダリングされません。

問題を説明するjsFiddleデモをセットアップしました。マウスを左右に動かして長方形を回転させます。

• 要素の高さが 400px の場合、すべて正常に動作しているように見えます。

• 「4000」をクリックして、要素の高さを 4000px にします。テキストは特定の範囲で更新を停止し、レンダリングはちらつきます。

• 「40000」をクリックして、要素の高さを 40000px にします。小さな角度ではきれいにレンダリングされますが、約 80 度で完全に消えます。

何が起きてる？回避策はありますか、それとも WebKit のバグを報告する必要がありますか?

(注: この動作は、OS X の Safari と Chrome の両方で見られます。)

CSS 変換 (およびブラウザー固有の -webkit、-o など) を適用しています。

変換: 行列(0.5 , 0 , 0, 0.5, 0 , 0);

div に移動し、その div の子で jQuery の draggable() および resizable() プラグインを使用します。

私が抱えていた問題は、子要素をドラッグまたはサイズ変更するときに、適用されたスケールに等しい係数で、jQuery が行った変更がマウスと「同期」していないことでした。

プラグインにパッチを当てることを提案する解決策をstackoverflowで見つけました（愚かにもブックマークしなかったため、現在は見つかりません....）、それは素晴らしく機能しました。それはこれらの行に沿って行った：

私は次のような独自の変更を加えました (6 ～ 7 行で、「倍率」による動きの乗算を確認できます)。

それを提案してくれた人にとても感謝しています。

それで、私の質問です！jQuery にパッチを適用する必要のない、スケーリングされた要素内にドラッグ可能/サイズ変更可能なイベントを配置する良い方法に出くわした人はいますか? 私はグーグルで検索しましたが、これが私が見つけた最良の解決策でした。CSS変換を使用して、これらの条件下でおそらく機能するjqueryの代替手段を知っている人はいますか?

ご回答ありがとうございます。

ラップされた with を含む<ul>多くのリストでCSS3 変換を使用したいと考えています。<li><img><a>

http://jsfiddle.net/h2T8j/1/ を参照してください。

私<ul>は、ある角度で回転<li>させ、同じ角度ですべて回転させ、斜めのパスに沿って直立に見えるようにするために反対方向に回転させたいと考えています。

ただし、Chrome (9.0.1084.30 beta) と Safari (v5.1.5) では結果が異なります。

-webkit-perspective-origin: 0% 0%からを削除しようとしまし<ul>たが、結果は<li>要素から浮き上がります。要素にクリック イベントを追加しようとしても<li>、Safari では機能しません。

Chrome で結果を確認する

Safariでの結果と比較

両方のブラウザで同じように動作させる方法はありますか?

ありがとうございました。

ホバーするとサイズが拡大するdivがあります-これはすべて正常に機能し、見栄えがします。

ただし、ホバーしたdivの1つがコンテナの端に近い場合、スケーリングされたdivはオーバーレイされません。

画像：

ホバーする前：

ホバー時：

ご覧のとおり、サイズが大きくなったdivは灰色のdivの後ろにあります。z-index値で遊んでみましたが、この場合は効果がないようです。

これはcss変換を使用して可能ですか、それとも別の方法を使用する必要がありますか

ありがとうAH

CSS3を使って一種のフリップ効果を作ろうとしています。

次に例を示します：http：//jsfiddle.net/MNhK7/

Chrome19またはFF11でわかるように、移行中に要素が移動するのに、終了位置と開始位置が本来あるべき位置にあるという問題が1つあります。なぜですか？

transform-originこれを防ぐために考えていたものを設定しましたが、何が欠けていますか？

要素のホイールがあるページがあり<div>、ボタンをクリックするとホイール全体が回転します。

この効果は、本質的に絶対的な CSS 変換を使用して実現します。ただし、ホイールは非常に大きく、HD ディスプレイでは見栄えがしますが、画面が小さいと端が切れてしまいます。通常のレイアウトのように % 幅を使用することはできません。必要なのは、ほとんどのブラウザのズーム機能と同じようにページ全体を縮小することです。

私自身は、ctr+mouseWheel がページをズームアウトしてページ全体を表示できることを知っていますが、他の人がこれを行うことは期待できません。

ラッパー div で使用-browser-transform: scale(amt);して必要な効果を得ることができることはわかっていますが、動的に行う方法がわかりません。スケールを 0.5 に設定すると、画面に関係なく 0.5 になります。どの画面でも、ホイールの端を画面の端から数ピクセルだけ離したいです。メディア クエリを使用して問題を解決できることはわかっていますが、理想的とは言えない結果が残るか、さまざまなクエリが必要になりすぎます。プログラムで変更する方法-browser-transform: scale(amt);、または有限の制御を行うその他の方法が必要です。

何かご意見は？

CSSのrotateX変換を適用したdivがあります：

それに：hoverルールが適用された小さなdivの束がその中に浮かんでいました。問題は、内部divの半分だけが：hoverイベントに反応することです。

JsFiddle： http: //jsfiddle.net/fNxgn/4/

片側に三角形のボタン (このhttp://css-tricks.com/triangle-breadcrumbs/のように) を線形の垂直グラデーションと境界線で作成する必要があり、純粋な CSS3 を使用したいと考えています。45度の「三角形」が必要な場合は問題ありません。次のように書くだけです

その疑似要素の半分を .button の下に隠します (したがって、三角形のように残りの半分だけが表示されます)。

しかし、別の角度 (より急な角度など) が必要な場合は、標準の XY 回転とスケーリングでは作成できません。たとえば、三角形の上半分に 1 つ、下半分に 1 つの 2 つの div を使用できますが、境界線とグラデーションに問題がある可能性があります。

カラーストップのある複数のグラデーションでそれを行うことは可能でしょうか?

3D空間で回転および変換されている立方体要素があります。

この変換のrotateY部分だけを特定の時間に調べたいと思います。これは可能ですか？

私は持っています：

ヘルプ？:-)

3D 空間の要素でカード フリップを行う CSS があります。ページを上下にスクロールすると、Chrome の特定の場所に白い要素がランダムに表示されることを除けば、うまく機能します。Facebookタブ内の例として画像を添付しました。Chrome ウィンドウでは、白い「ボックス」がコンテンツを覆い隠すことがあります。3d 変換 css をコメントアウトすると、これは発生しません。これは、3D 処理を行う cssのフィドル ( http://jsfiddle.net/derekaug/QSEvs/ ) です。残念ながら、まだ公開されていないため、実際のタブにリンクすることはできません。