問題タブ [css-transforms]

私は以下のコードを持っています:

HTML 本文コード:

CSS コード:

JavaScript コード:

JavaScript コードは、ページのロード イベントで実行されます。上記のコードはhttp://jsfiddle.net/fakjXで実行できます。

IE9 で CSS3 変換スケール スタイルを 0.3 から 1 に変更する必要があります。しかし、私はできません。これはIE9のバグだと思います。コードは問題ないようです。

これは IE9 のバグだと思いますか? または、この問題を解決するための解決策はありますか?

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

Linux 64 ビット ボックスで Chrome 12 を使用していますが、以下のサンプルが動作しません。

• http://www.satin.org/research/webkit/snowleopard/snowstack.html
• http://www.marcofolio.net/css/3d_animation_using_pure_css3.html
• http://kevchapman.co.uk/css/webkit-css-perspective-demo/

それらはすべて を使用-webkit-perspectiveしていますが、最終結果は Safari (Windows XP) で得られた結果とは大きく異なります。結局のところ、Chrome は CSS 3D 変換をサポートしていますか? または、サポートはまだ制限されていますか?

ありがとう！

CSS3 3D 変換 + アニメーションは素晴らしいです。何かを曲げる方法があるかどうか疑問に思っています。

この例では (紙の) div をひっくり返しますが、実際には紙をひっくり返すと少し曲がるので、アニメーションが硬く見えます。

それで、私が見落とした特性、または曲がったように見える組み合わせはありますか?

曲げを伴うページ カールの例 (イメージ): http://numerosign.com/software/css3machine/#documentation

mozilla moz-transform スケール プロパティに問題があります。
firefox 以外のすべてで正常に動作する zoom プロパティの代わりを探しています。

div を縮小したい場合、その「コンテンツ」は縮小しますが、コンテナーのサイズは同じままで、他のコンテンツの周りに大きなギャップが残ります。

コンテナのサイズも強制的に小さくする方法はありますか?

明確にするために、ここに簡単な例を示します。
Chrome と Firefox で開くと、違いがわかります。

斜めに配置された画像を使用するサイトに取り組んでいます。画像は非常にシンプルで、内部にテキストが含まれているため、画像または CSS3transform: rotateとborder-radiusプロパティのいずれかを使用して効果を実現できます。

ただし、一方を他方よりも使用することに大きな利点があるかどうかは疑問です。CSS のみの代替案の方が読み込みが速いのではないかと考えていますが、欠点は各画像により多くのコードを使用することです。画像を使用していますが、要素ごとに多くの配置を行う必要があります。また、最初のケースの CSS は、ブラウザー固有の拡張機能を使用して検証しません。サイトがほとんどのブラウザーで正しく表示されることを確認する場合、これはどれほど重要ですか?

これらのオプションのいずれかを使用するための一般的なアプローチはありますか? あなたは何をお勧めします？

Webkit 変換を使用してカード反転効果を作成しています。あるセクションでは好きなように動作させています。ここでは、DIV が中心軸を中心に回転し、カードがひっくり返ったように見えます。

これと同じ効果をページ遷移に追加したいと思います。同じ CSS と HTML 構造を使用していますが、この場合、中心軸を中心に回転する効果が得られません。

代わりに、オブジェクトの中心ではなく左側に固定された y 軸に沿って変換が回転しているように見えます (したがって、カードをめくるというよりも、ドアが開いているように見えます)。

仕様を読んでいますが、回転軸の位置を制御するプロパティがわかりません。フリップを機能させるには、これに何を追加または変更する必要がありますか?

html構造:

および css (効果を開始するために jQuery を介して .flip が追加されています)

問題: div 内の子要素に適用された css3 変換は、"overflow: auto;" を使用する場合に、含まれる div のスクロールバーの scrollHeight と scrollWidth を計算するときに、ブラウザー (FF5、Chrome12、IE9) によって無視されます。

望ましくない動作を示すjsfiddleの小さなテストをまとめました。

http://jsfiddle.net/4b9BJ/

基本的に、回転とスケーリングに css3 変換を使用して単純な Web ベースの画像ビューアーを作成しようとしています。固定幅/高さの div をスクロールして、含まれる画像の完全なコンテンツを表示できるようにしたいと考えています。

この問題を処理する賢明な方法、または大まかな回避策はありますか? どんな助けでも大歓迎です。

目標：パノラマ画像/ビデオをシリンダーに巻き付け、内側の「カメラ」を制御してパノラマを見回します。

まず第一に、シリンダーに巻き付けられたビデオはもちろんのこと、画像の例を見つけることができません。誰もがこれを行う方法を知っていますか？

マウスまたは矢印キーを使用してビューポートを制御するというインタラクティブな側面は問題ないと思いますが、CSS変換と3D Webkitコーディングに慣れていないので、このシリンダーのものから始める方法がわかりません…< / p>

長い間愛してる-答えてくれてありがとう！-ジョエル

CSSで回転点を設定することはできますか？デフォルトの回転ポイントは50％、50％です。私は試した：

しかし、それは機能しません...何か提案はありますか？

オブジェクトを取得し、事前に設定されたトランジションにアニメーション化することなく、rotateY プロパティを変換する簡単な方法を探しています。これは、このスライド ショーを完成させるのに役立ちます(Chrome または Safari (WebKIT) でのみ表示)

効果の内訳の例を次に示します。

CSS - 遷移は 5 秒に設定されています

フェーズ1

Element1 - 回転 Y:0;

Element2 - 回転 Y:-180;

ユーザー- ボタンのクリック

フェーズ2

Element1 - 回転 Y:180;

Element2 - 回転 Y:0;

Phase3

Element1 - 回転 Y:-180;

Element2 - 回転 Y:0;

ユーザー- ボタンのクリック

Phase4

Element1 - 回転 Y:0;

Element2 - 回転 Y:180;

最初のトランジション (フェーズ 1 & 2) が完了した後、フェーズ 1 でElement2があった位置になるように、Element1 のrotateY値をトランジションなしで -180 に設定する必要があります。これにより、私が提供したリンクの例でわかるように、アニメーションによって要素が互いに回転しているように見えます。残念ながら、すべての要素がrotateY:180になると、効果はなくなります。

jsFiddle をやりたいのですが、今はこのプロジェクトに時間がありません。

アニメーション/トランジションなしで、オブジェクトをポイント a からポイント b に移動するだけのソリューションが必要です

すべてが理にかなっていることを願っています