問題タブ [css-transforms]

CSS3 で構築された非常に複雑なサイトがあり、HTML 要素が 3d 変換、回転、反転、フロップされ、一般的に歪んでいます。

これらの要素の 1 つの画面上の位置を把握しようとしていますが、その方法がわかりません。何か独創的なアイデアを持っている人はいないかと思っていました。

または、誰かが の背後-webkit-perspectiveにある数学を説明できる場合は、モデル化する方法がわからない唯一のものであるため、位置を把握できます。

答えが見つからない「単純な」質問 --webkit-perspective実際に数学的には何をしますか? （私はそれが持っている効果を知っています、それは基本的に焦点距離コントロールのように機能します）例えばどういう-webkit-perspective: 500意味ですか?!?

とりわけ、移動したものの画面上の場所を見つける必要があります。-webkit-perspective

に変換変換を適用して、それを元の場所<div>に戻すことができるようにしたいと思います。<div>

否定された値で同じ操作を適用しても、DIVは画面の元の場所に戻りません。

• 応用翻訳：-webkit-transform: translate(300px, 400px);

• 動作していない「元に戻す」効果：-webkit-transform: translate(-300px, -400px);

元に戻すレベルを制御したいので、変換をリセットすることはできません。

私はゴルフスコアカードジェネレーターを持っています。構造的に、ページには 1072px 幅のテーブルをラップするクラス .printarea の div があります。

私は徐々にそれを手に入れてきたので、印刷するとすべての主要なブラウザーで横向きの単一ページが表示されます。

Firefox では、回転とスケールが BODY で指定されている場合、スケールは機能しません。そこで、ローテーションを他のすべてを含む DIV に移動しました。これにより回転が実現されましたが、テーブルがオフセットされたため、右側 (テーブルの下部) と上部 (テーブルの右側) でトリミングが発生しました。

余白と絶対配置を使用してこれを修正しようとしましたが、これにより、テーブルの小さな断片が 2 ページ目に分断されてしまいました。縮尺をごくわずかに縮小しても、2 ページ目の配置は解決されません。

原点設定で遊んで、最終的にposition:absolute; -moz-transform-origin: 400px 900px; は、テーブルの上部 (ページの左側) の一部が失われ、テーブルの下部 (ページの右側) が端から簡単に 3 インチ離れているにもかかわらず、最後の 2 行が移動します。紙の。比率を小さくしても、ディスプレイスメントは修正されません。

これは 1 つのカードの静的コピーです: http://egolfplan.com/example.html

投稿の最後に、印刷からの PDF のスクリーンショットを追加します。

現在の CSS

これは 68% にスケーリングされます

48% にスケーリング

-moz-transform-origin: 400px 900px;

そのため、私はWebブラウザー用の特定のアプリケーションを検討しています。このアプリケーションでは、色をストレートアルファチャネルとして表現し、黒と白のアルファチャネルを別の要素として表現する必要があります。（両方のタイプの例

私は何ヶ月も前に知っていますが、IEはいくつかの逆フィルターオプションをサポートしていましたが、私はcss3変換を行っているので、最新のブラウザー、できればChromeで動作するためにこれが必要です。

基本的に私がやりたいのは、CSS変換が適用された要素、特に回転が適用されている要素です。次に、それを取得して、白黒変換が適用された別の同等のサイズの要素にコピーします。追加のボーナスは、元の要素をストレートアルファを使用するように設定することですが、今のところそれなしで生きることができます。

調査を開始するルートが見つかりませんでした。持っていればとてもありがたいです。私の最後の手段は、WebGLまたはCanvasで作業を開始し、そこで出力を変更することです。

歪ませることができることはわかっていますが、各コーナーを特定の角度で歪ませる方法がわかりません。

私が取り組んでいるプロジェクトは次のとおりです: http://map.ucf.edu/

特にメニュー内のタブを見てください。現在、画像を使用していますが、対応するブラウザ用に変更したいと思います。

CSS の trapazoidを作成できることはわかっていますが、それはコンテンツのない境界線を使用しています。最終結果には、少し丸みを帯びたコーナーも必要です。

編集：Zoltan Tothのソリューションから始めて、これを達成できました：デモ

現在の CSS3 でオブジェクト (具体的には DIV) を円弧または曲線に沿って移動することはまったく可能ですか? 説明に役立つ画像を次に示します。

onclickこれを使用してdivイベントを回転させています:

これは反時計回りに回転します。

しかし、それは一度動作します。もう 1 つの問題は、最初のイベントの前に 2 番目のイベントをクリックすると、最初のイベントが自動的に機能しなくなることです。

実際には、クリックするたびにこのdivを回転させたいと思っています。ここに例があります http://maatren.com/earth/

回転と回転では、変換と遷移のみを使用して div を回転させ、id Earth では、変換と遷移を使用せずに背景画像を使用しています。

次の CSS 変換を HTML 入力ボックスに適用しました。

表示領域がいっぱいになるまで入力ボックスにテキストを入力すると、キャレットは入力の端を超えて非表示になります。通常、入力するとキャレットとテキストがスクロールします。

キャレットが事前にスケーリングされた入力の幅になると、テキストは最終的にスクロールを開始します。テキストをスクロールするタイミングを計算するときに、ブラウザがスケーリングを無視しているようです。

これは WebKit ブラウザーのみの問題です (Chrome と iPad でテスト済み)。-moz-transform に相当するものは、FireFox で正常に動作します。ズーム プロパティは Webkit では正常に機能しますが、iPad でスケーリングするときは十分に滑らかではないため、実際には自分のプロジェクトでは使用できません。

ここで例を見ることができます: http://jsfiddle.net/4Kv6w/

最初の入力ボックスは -webkit-transform スケーリングです。2 番目のボックスは、ズーム セットです。3つ目は普通です。

どんな助けでも大歓迎です。

編集- -webkit-transform を使用して入力ボックスを左に移動することにより、スケーリングなしで問題を取得することもできます。例を次に示します: http://jsfiddle.net/4Kv6w/15/

CSSで回転した要素に影を付けると、影は要素の回転に依存します。次に例を示します。

影がすべての要素の同じ光源から来ているように見えるように、回転後に影が落ちる場所を計算することは可能ですか? 私はそれをjavascriptまたはサーバー側で行う必要があると仮定していますが、それは問題ありません。