問題タブ [css-transforms]

変換 CSS を無効にするクリック可能なボックスを作成しようとしています。CSS を JavaScript で上書きしようとしていますが、機能していないようです。をクリックした後、左と下に少し移動するだけでいいと思い<a>ます<input>。

別の質問への回答で、ページを下にスクロールしたときに PNG の回転をアニメーション化する簡単なコードを作成しました。それはうまくいきましたが、アップスクロールでアニメーションを反転すると正しく機能しませんでした。

PNG が元の位置に戻ることが予想されますが、数ピクセル不足しています。

フィドル: http://jsfiddle.net/EnSkJ/3/

コード:

CSS3変換を使用して回転している4つのdivで構成された立方体（ほぼ）があります（これはChrome拡張用であるため、現在-webkitに制限されています）。

ただし、http://jsfiddle.net/CxYTg/にアクセスして「1」、「2」、「3」、「4」をクリックし、もう一度「1」をクリックすると、最後のローテーションが表示されます。逆方向に回して元の向きに戻します。

CSS3 を使用してこれを修正する方法はありますか? 次のような方法があるかどうか疑問に思っています。

(はい、JavaScript を使用してこれを実行できることは知っていますが、CSS のみで実行できるかどうかを知りたいです。)

私はアニメーション化された CSS3 メディア クエリで遊んでいます。はい、それらの実際の使用には疑問がありますが、楽しいものです。とにかく、ブラウザーのサイズ変更時にボックス/div/セレクターをトランジション/展開/縮小などに使用できますが、変換に問題があります。私がやろうとしているのは、特定の解像度で div を反転または回転させることです。

これは、iPad が横向きから縦向きに変化し、これが発生したときに div が反転したと考えてください。

これは実際に可能ですか?もしそうなら、私は何が欠けている/間違っていますか?

「css変換、クロムのギザギザのエッジ」と同様に、3D変換のFirefoxでも同じことが起こります。例：http：//jsfiddle.net/78d8K/5/（<-覚えておいてください：Firefox）

今回は、backface-visibility助けにはなりません:(

何か案が？

私はグーグルマップのような地図のウェブサイトを構築しています。互いに接続された画像のタイルがあります。マップはマウスでドラッグすることで探索され、ドラッグするたびに新しい画像が読み込まれます。ドラッグによる探索機能を使用するために、次の2つの方法を見つけました。

1. スクロール関数を呼び出して、マップ内の適切な場所にスクロールします
2. マップにcss-transformtranslateを適用して、マップの右側が表示領域に入るようにします。

問題は、メソッド間にパフォーマンスの違いがあるかどうかです。（主にレンダリング速度とドラッグの滑らかさの観点から）また、方法の1つを好む他の基準はありますか？

何らかの理由で、すでにテキストシャドウが適用されている段落にCSS変換を適用すると、cssでテキストシャドウに指定されている色に関係なく、テキストシャドウの色が段落の色になります。この問題はChromeでのみ発生するようで、Firefoxでは正常に機能します。以下のサンプルWebサイトは、これを実証する必要があります。

段落に回転を適用して、テキストシャドウを正しくレンダリングする方法はありますか？

ここに私のcssコードがあります:

このクラスからフィルター マトリックス M11 の値を取得したいと考えています。この場合、私は試しました：

他にもいくつかのバリエーションがありますが、何も得られません。ノード n から M11 値を取得する方法を知っている人はいますか? 基本的に、IE7で回転を度単位で計算するには、これが必要です。

http://jsfiddle.net/nicktheandroid/yWKMD/

例を見てください。要素をクリックすると、 から まで回転しますfront。back問題は、中心を中心に回転していないことです。バランスが崩れているようです。マウスを側面の左端に置いてfront、要素をクリックします。 、backサイドの位置がどのようにずれているかを確認します。それらはまったく同じ場所に配置する必要があります。

パディング/マージン/ボーダーを削除すると、うまく回転することに気付きましたが、そこにパディングとボーダーを配置する必要があります。パディングとボーダーでこれを行う方法はありますか?

テキストが-90度回転したテーブルを作成しようとしています。今までテキストの画像を使っていましたが、これをテキストに変えたいと思っていました。

修正できないと思われる問題がいくつかあります。

1. 列07のテキストが列08にオーバーフローします。
   • これをoverflow：hiddenで修正することはできません。正しい形状を得るには、幅と高さの両方を200pxに設定する必要があるためです。
2. 回転したテキストの幅と高さを設定する必要があるため、操作があまり柔軟になりません。これも問題1の原因になります。
3. 幅を200pxに設定する必要があるため、マージンを「0 -100px」に設定する必要がありますが、回転しても幅は200pxのままであり、テーブルが非常に大きくなります。
4. フォントサイズを変更すると、列にうまく収まりなくなります。
5. フォントはひどく見え、読みにくいです。これは、ブラウザの将来のアップデートでうまくいくと思います。

これが実際のjsFiddleです

http://jsfiddle.net/CoryMathews/ZWBHS/

私はそれが機能する必要があり、IE7 +、Chrome、FF、およびOperaで同じポイントに到達しました。

この方法を実際に使用できるように改善する方法について何かアイデアはありますか？私のアイデアのいくつかは次のとおりです。

1. ページの読み込み時にjavascriptを使用して幅や高さなどを計算できます。これにより、上記の問題2と3は解決されますが、1は解決されません。ただし、表示にjavascriptを使用するのは嫌です。

2. おそらく、私はより良い制御を与える変換原点を誤用しています。現在使用している数値「00」を使用すると、必要なサイズを簡単に計算できます。