問題タブ [webkit-transform]

Chrome 14.0.835.2 dev-mを使用して要素を回転させて-webkit-transform: rotate()いますが、要素内のテキストに対して非常に奇妙な処理を行っています。これは、「クリスプ」の代わりに「スムーズ」アンチエイリアシングを使用してテキストを回転させたときにPhotoshopで得られるのと同様の効果を思い出させます。

誰もがここで何が起こっているのか知っていますか？これはこのWebkitまたはChromeバージョンに固有のものですか、それとも修正するためにできることはありますか？（リスト要素間の境界をアンチエイリアスすることもありません）

CSSは次のとおりです。

translate3d（webkit変換）の「z」が使用されている例を誰かが説明または指摘できますか？モバイルSafariでハードウェアアクセラレーションによる2Dアニメーションを取得することに成功しましtranslate3d(x,y,0)たが、現在はzパラメーターを使用してスケーリングしようとしていますが、効果がないようです...

補足：iOSでスムーズに動作する小さなズームスクリプトを作成しようとしています。

-webkit-transformFirefox の CSS ルールに代わるものはありますか?

私はiPhoneスタイルのスクロールを提供するためにiScrollを使用しています。ただし、テキストボックスをクリックしても、キーボードは表示されません。

考えられる原因を見つけようとしたところ、iScrollスクリプトを削除すると正常に機能することがわかりましたが、その場合はスクロール機能がありません。

これはiScrollのバグですか。はいの場合、テスト済みの回避策はありますか？または、iScrollの代替手段はありますか？

前もって感謝します。

ですから、これは実際の質問よりも好奇心の質問ですので、ご容赦ください。私はちょうどチェックアウトしました：

http://www.apple.com/iphone/

そして、表紙のスライドショーは私には本当に印象的です。私はそれを再現したくありませんが、私はこれがどのように機能するかに本当に興味があります。私の調査によると、それらは時限Webkitトランジション/変換の束を使用しているだけですが、何が起こっているのか正確にはわかりません。

また、ハードコーディングせずにこの動作を作成する簡単な方法はありますか。それが今私が行うことだからです。

解決済み- 問題は、回転を行うと要素の半分が Web ページのニュートラル (ゼロ) Z 軸の後ろに配置され、WebKit が明らかにその「ニュートラル」平面を通過するマウス イベントを許可しないことです。そのため、回転ポイントをパネルの右端/左端に変更すると解決しました。奇妙ですが、今のところ機能します。

4 つのパネルを持つ単純な HTML5/CSS3 ページがあります。これらのパネルは、-webkit-transform を使用して適切に配置されています。:hover では、-webkit-transform を使用してパネルを最前面に表示します。コードは以下です。

何が起こるかというと、:hover アクションが信頼できないということです。パネル上でマウスをスワイプすると、パネルの上にカーソルを置いたままマウスの移動を停止するのが一般的ですが、パネルは元の位置のままです。具体的には、左から右にスワイプすると、左端の 2 つのパネルは正常に動作しているように見えますが、右端の 2 つのパネルは、マウスがパネルの半分を横切るまで拡大されません。

これは何が原因でしょうか？

EDIT：簡単なフォローアップ、変換された要素に配置されたリンクは、要素の左端（2つの左パネルの場合）または右端（2つの右パネルの場合）の半分でのみクリック可能になるようです. つまり、クリック ゾーンは要素の「近い」半分に対してのみアクティブになります。

まず、HTML (最小限の例):

そしてCSS：

I am trying to make a 3d transition/transformation so that when a link is click a bar run the length of my website rotates to reveal different options. However it currently looks very untidy, in that each face of the cube has gaps around it, and you can see each face of the cube, regardless of whether it not view (i.e when it is animating you can see text you should be able to see, it also gives the impression that bar grows in width when animating.

Is there anyway I can tidy this up?

I have made a fiddle which can be found here

私が使うとき

要素の場合、この要素の半分しかクリックできないことを見つけてください。誰が助けてくれますか

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

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

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

Android の Webview 内の CSS で background プロパティを使用して、DOM に割り当てられた画像を次のように反転/ミラーリングしようとしています。

-webkit-transform:translate3d(280px,135px,0) scale3d(-1,1,1);

さて、問題は、Android の Webkit の実装が -webkit-transform プロパティに添付された scale() または scale3d() をリッスンしていないように見えることです。そうは言っても、画像を A​​ndroid Webview 内の鏡像にする方法はありますか?

ところで、同じ HTML5/JS/CSS3 コードが Safari と iOS シミュレーター内で動作します。また、translate3d() は問題なく動作しますが、rotate3d() は scale3d() と同じように失敗します。