問題タブ [css-transforms]

HTML画像ビューアの場合、CSSを介して一部の画像を自動回転させようとしました-*-transform: rotate（90度）。幅が画像の高さよりも大きかったため、img要素が小さすぎて、回転した画像が上下のテキストの一部をオーバーレイしていました。

この問題を修正/回避するためdivに、予想されるサイズでその周りを作成しました。これは、画像も現在置き忘れられているという別の問題につながりました。この2番目の問題を修正/回避するためにdiv、悪い位置を修正する2番目の問題を作成しました。

一例（オンライン：ここ）：

• 写真のサイズはw=1024、h=768です。
• 90度回転しています。
• アウターdiv：<div style="display:block; width:768px; height:1024px;">
• 内側div：<div style="position:relative; left:-128px; top:128px; display:block;">

これにより、正しい/期待される/必要なポジショニングとアライメントが得られます。

これを行うためのよりエレガントでクリーンな方法があるかどうか疑問に思います。

幅/高さの変更からCSS回転divトリガーの上部/左再配置に続いて、CSS回転と動的な幅/高さを解決するための助けが必要です。

transform-origin要素の幅または高さが更新されると同時に、動的に更新する必要があることを理解し、考えています。私はクロスブラウザの巧妙さではなく、技術的な解決策にのみ興味があるので、デモ-webkitではプレフィックスのみを使用します。

HTML

CSS

JavaScript

2番目のデモでは、CSSを追加します

角度スライダーvalueのをに更新します60

x, yスライダーを使用して幅/高さを変更すると、位置を移動せずに要素が寸法で拡大および縮小するという点で、正しい結果が生成されます。ただし、要素を回転させると、目的の（中心点）原点を中心に回転しなくなります。

私はこれにいくつかのバリエーション（マウスダウン、マウスムーブ、変更）を試しましたが、幅/高さを変更する前に原点を設定すると思いましたが、<div>位置はまだシフトしています。

jQueryはCSSの変更を同時に適用していると思いますが、幅/高さを変更する前に原点を更新する必要があると思います。

基本的に、シェイプがすでに回転している場合は、幅/高さを変更するときに、シェイプが常に中心点を中心に回転し、移動しないようにします。

これに似たトップツーテキストを作成しようとしていますが、

ただし、私のコードは正しい効果を生み出していますが、このように出力しているため、厳密には正しく話していません

これが私のCSSです。2番目ではなく最初の例として表示されるようにするにはどうすればよいですか?

-90deg で回転する要素を自分のサイトに表示していますが、ブラウザーが CSS 変換をサポートしていない場合、要素の位置がずれており、あまり良くありません。CSSを介したこのローテーションがサポートされているかどうか、JavaScriptまたはjQueryで検出したい（サイトですでにjQを使用/ロードしているため、jQまたはJSの場合は関係ありません）？

私はModernizrを知っていますが、その小さなことだけのために、そのライブラリ全体を含めたくありません（そして、Webサイトの速度の読み込みをスピードダウンします）.

この画像を参照してください。

http://i56.tinypic.com/311vw51.png

画像 2 と 3 (左側) の境界線の一部が切り取られており、完全には見えていないことに注意してください。私は transform:rotate(xdeg); を使用しています。CSS ルール。

パディングを追加する以外に、これについてできることはありますか? z-index を変更してみましたが、効果がないようでしたか? 何か不足していますか？

3D回転されたdivは、より高いz-indexを持つ別のdivをカットします。これを防ぎ、z-indexの定義を強制的に順守させたいと思います。-webkit-transform-style：flat;と思いました。これを解決します。誰か提案がありますか？

キーボード コントロールで回転できる 3D キューブを作成しています。ただし、回転後、各面の一部は対話性を失います (マウス イベントは含まれる要素に登録されません)。その問題の原因を知っている人はいますか？

説明が難しいので、テストサイトへのリンクを次に示します。

http://joe-morgan.net/projects/matrix3d/

もちろん、Safari と Chrome でのみ動作します。

ジョー・モーガン

次の CSS は Webkit で正常に動作します。Opera では確認していませんが、Firefox では動作しないことがわかっています。理由を教えてもらえますか？

正しいクラスが確実に HTML に適用されています (Firebug で調べたところ、 の-moz-animation: 500ms ease 0s normal forwards 1 arrowRotateDotプロパティが表示されます.arrow)。

これもIE9では機能しませんが、もともと持っていた-ms-animation:...と-ms-transform:.... IE9 で動作するはずだと思っていましたが、そうでないときは、IE がまだこれらをサポートしていないと思い込んでいました。ただし、Firefox では機能しないため、別のことが起こっている可能性があります。

私の Froyo ブラウザ (Nexus One) では 2D 回転が機能しているように見えますが、Y 軸を中心に回転しようとすると、代わりに Z 軸を中心に回転しているように見えます。RoateY の代わりに -webkit-transform: matrix3d も試しましたが、うまくいきませんでした。

回避策はありますか、またはこれが Android で正常に使用されているという報告はありますか?

-webkit-transform: translate(5px, 5px)との違いは何だろうと思いました-webkit-transform: translateX(5px) translateY(5px)

性能差はありますか？translateX3D 変換にも使用されるためです。私の質問は次のとおりです。変換の計算に違いはありますか? translateXGPUを使っているので速いと言えますか？そうですか？

パフォーマンスを測定するにはどうすればよいですか?