問題タブ [skew]

デザインの一部として CSS スキューを広範囲に使用するサイトがあります。backface-visibility を使用すると、iPad を除いてギザギザのエッジの問題が解決されました。iPhone を含む他のすべての Webkit ブラウザーでは、エッジは滑らかですが、何らかの理由で iPad は動作しません。スキューのコードは次のとおりです。

これはサイトです: acumen.org

Chrome/Firefox でサイトを構築してきましたが、IE で見たところ、非常に壊れています。予想はしていましたが、修正するのは思ったより難しいことがわかりました。

主な問題は、私のサイトが多くの歪んだ要素 (平行四辺形として使用されている) を使用しており、その歪曲は IE に適用されていないことです。これらの div には「平行四辺形」というクラスが与えられているため、私のコードでは次のように記述しています。

はい、「filter:」タグがありませんが、私が読んだ限りでは、そのタグは IE7 以下でのみ必要です。少なくとも 1 つのバージョンの IE で動作するようにしたいので、残りのバージョンを検討します。

そのため、Chrome を使用してこのコードを見ると、-ms-filter タグがあり、取り消し線が引かれています。IEでは、それも表示されません。コード ジェネレーターからオンラインで何度もコードをコピーしましたが、まだ機能しません。何か案は？

この問題に関するページは次のとおりです。リンクが機能していないことはわかっています。意図的にリンクを壊しました。

更新: Teemu のおかげで、-ms-transform を適用したので、IE9 以上でスキューが機能するようになりました。少なくとも IE8 は引き続きサポートしたいと考えています。

小さな (16M 行) の個別のテーブルと大きな (6B 行) の歪んだテーブルの間にピッグ ジョインがあります。通常の参加は 2 時間で終了します (微調整後)。試しusing skewedた結果、パフォーマンスを 20 分に改善することができました。

ただし、より大きなスキュー テーブル (19B 行) を試すと、SAMPLER ジョブから次のメッセージが表示されます。

これは を試すたびに再現可能using skewedであり、通常の結合を使用した場合には発生しません。

設定を試みたところmapreduce.jobtracker.split.metainfo.maxsize=-1、job.xml ファイルにあることがわかりますが、何も変わりません!

ここで何が起こっているのですか？これは が作成した配布サンプルのバグusing skewedですか? パラメータを に変更しても効果がないのはなぜ-1ですか?

/ - / のようなプロフィール写真を表示しようとしています (スラッシュは、skewX を使用して傾斜を表し、ハイフンは、水平に配置された背景画像を表します)。

問題は、このコードも背景画像を歪めることです:

私はこのように背景の歪みを逆にしようとしました:

...しかし、/ [-] / (背景が斜めに収まりません) になります。

私は一日中これにいました、助けてください。コーダーズ・ボックを手に入れた！

http://www.w3schools.com/tags/canvas_settransform.asp

context.setTransform(a、b、c、d、e、f);

W3C の学校は と言って"Skew the the drawings horizontally"いますが、どの値を使用していますか?

CSS が物事をゆがめるような程度ではなく、PI も使用していないようです。説明？

画像用の歪んだマスク コンテナーの作成に取り組んでいます。

私が抱えている問題は、ブートストラップを使用してレスポンシブ レイアウトでイメージをコンテナーに塗りつぶすことです。

css プロパティの背景画像と設定を使用しようとしましbackground-size: cover;たが、背景画像がコンテナーで歪んでしまいます。

コンテナ内に画像を設定し、コンテナの高さと幅を中央に配置/一致させます。

ここで私のフィドルを見てください。 http://jsfiddle.net/RyU9W/3/

編集

ゆがみによるコンテナの余分な高さと幅を調整する必要がありますが、ほぼ必要なことを行うプラグインを見つけました。

更新されたフィドル http://jsfiddle.net/RyU9W/5/

HTML

CSS

これと同様に、div を歪めようとしてい ます :テキストを歪めずに css を使用して div の上部を傾斜させます。 /

これが私がやろうとしていることのイメージです:

基本的に、 4辺すべてで境界線を奇妙な方法で傾ける必要があります。背景画像でこれを行うことができますが、div の幅と高さをレスポンシブにできるように、CSS でこれを行う方法を希望します。古いブラウザーで動作するソリューションを見つけたいのですが、すべてを手に入れることはできないことを理解しています!

4辺すべてに斜めの境界線を付けるにはどうすればよいでしょうか? (注: 緑色のボックスの下部の境界線は、中央で上向きに傾斜し、外側が下向きになっています。これを行うために境界線は必要ありません。一方向に傾斜しているだけで問題ありません。)

私はこれを機能させることに本当に近づいていますが、少し立ち往生しています。

2 番目のテキストをそのままにしておく必要がありますが、それを含む div は幅方向に拡張されます。2 つのテキストが常に重なり合うようにします。

http://jsfiddle.net/29W6R/

HTML:

CSS:

JS: