問題タブ [webkit-transform]

http://www.thoughtspot.com/#forresterには、「 forrester 」と書かれた 3 枚の紙の画像があります。それらの上にマウスを置くと、わずかにズームインし、マウスを離すと縮小します。私はクロムを使用しており、次のプロパティが適用されていることがわかります。

-webkit-transform: スケール (1,1);

しかし、それはスケーリングなし/元のサイズのみを示しているようです。スケーリングがどのように行われているのか途方に暮れています。誰か私にこれを説明できますか？

私は本当にいくつかの助けを使うことができました。このサイトhttp://medicalaid.orgで、別の開発者が去った後、私はそれを修正しようとしてきました。私が抱えている最後の問題は、Webkit アニメーションの半分を IE10 にロードできないことです。他のすべてのブラウザーは正常に動作し、事実上すべてのコンテンツ div にそれらがあります。たとえば、cssを書き直そうとしました：

そして、私は何も動作させることができません。誰かが私を見て助けてくれたら素晴らしいと思います

質問は他の質問に関連しています:少なくともその部分。正しい x 値と y 値を取得します。

私が開発しているアプリでは、ユーザーが顔のない面白いキャラクターの 6 種類の背景を持つ画像を作成して、ユーザーが自分の顔の写真を貼ることができます。これを行うには、画像をドラッグ、ピンチしてズーム、回転します。ドラッグしてピンチしてズームすることは制御できますが、画像を回転させると、正確な座標で画像を一致させることができません。画像は常に少し上がります。

例として、次の値を取得します。

x: 30、y: 80、スケール: 0.5、度: 40。

そのため、回転した画像をキャンバスに描くと、角度によってyが少し上がるようです。度数が少ないほど、上がらない。

この関数を使用して、回転した画像を描画しています。

}

PD: 指摘すると、画像を回転させないと、正しい位置に完全に一致します。

回転した画像の正しい x 値と y 値を取得するにはどうすればよいですか?

スライドメニューを作成しています。

メニューは長く、その中をスクロールできるようにする必要があるため、overflow-y: scroll を設定しました。

-webkit-transform (および他のブラウザーのバリアント) を遷移プロパティとして使用しています。

divの上にスクロールホイールを使用すると、ページ全体がスクロールされます。

メニューの動作を変更し、右のプロパティを移行すると (メニューを右に設定: -320px し、アニメーションを右に戻す: 0)、スクロールが機能します。

このバグは Safari でのみ発生します。Chrome やその他のブラウザでは問題なく動作します。iOSでも動作します。

誰でも回避策を知っていますか？以前にこの問題を経験した人はいますか? 私はそれに関する情報を見つけることができないようです。ありがとうございました。

div があり、その中にスパンがあり、その内容は 1 文字で構成されています

回転や文字間隔を適用するだけでも問題ないように見えます

回転と文字間隔の両方を適用すると、適用されるスパンが押し上げられたように見えます。

結果はこの JSFiddleで見ることができます

この他のバージョンの JSFiddle に見られるように、パディングで修正できます

しかし、スパンが押し上げられないように CSS の組み合わせを適用する方法はありますか?

"translateX(-50%) scale(1.2)"N 個の変換関数を持つ文字列が与えられた場合

1) どうすれば名前を一致させることができます["translateX", "scale"]か?

2) どうすれば値を一致させることができます["-50%", "1.2"]か?

動的に追加されdivたtranslateXと の値があるとします。translateY

rotateY(20deg)現在の変換 に追加したいのですが、それを適用するとelement.style.webkitTransform = "rotateX(20deg)"他の値が失われます。

と変換rotateYを失うことなくを追加する方法はありますか?translateXtranslateY

角度オフセットを使用してロードする Web ページをレンダリングする方法はありますか?

次のようなWeb 変換を実行できることは知っていますが、javascript: document.body.setAttribute( "style", "-webkit-transform: rotate(-90deg);");これは多くのサイトで機能しますが、包括的なソリューションを求めています。

わかりやすくするための問題の例:

1.) Netflix.comのプレーヤーは回転できません

2.) Twitch.tvのプレーヤーは元のままですが、プレーヤーの寸法が歪んでおり、ワイドスクリーンが誇張されています。

3.) YoutubeとGoogleの両方のページを回転すると、上下に大きな余白があります。

Webkitアニメーションを実行する必要がなく、Webページを横向きにロードする方法を誰かが知っているかどうか疑問に思っています.

ありがとう！