2012-07-03 9 views
7

私は、CSS3をアニメーション化するときに、それが使用されているすべての要素をピクセル化するように見えることがわかりました。CSS3 scale()はdivsにピクセル化されます

例:あなたはそれの上に置くと、上記の例ではhttp://jsfiddle.net/PD7Vh/2/

scale()は中央のdivをpixelates。

私のCSSの設定が間違っているのですか、それともscale()が自然にするのでしょうか?ここで

は、Windows 7上のChromeからのスクリーンショットです:

+0

Pixelate?新しい円滑な円を描くのではなく、円のピクセルを吹き飛ばすということですか?どのブラウザで? –

+0

これは役に立ちます:http://stackoverflow.com/questions/9986226/when-scaling-an-element-with-css3-scale-it-becomes-pixelated-until-just-after-t – RhinoWalrus

+0

@MrListerそれが起こるクロムとサファリ – zero

答えて

9

ソリューションが基準出発点として、それを縮小し、その後、それがために必要な限り大きなあなたのセンターサークルを開始することです。

次に、ホバーイベントでは、非スケール化された中心円を保持する1までスケールします。

参考:このような位置決めなどjsFiddle

注他の設定は、これらの変化を補償するため、行われます。


ステータス更新:
、サークルを作る円のASCII Characterを使用するか、 円を概説するために国境半径を使用するのではなく、考えてみましょう:

○•☼

☻☺ 参考:jsFiddle(注記位置は較正されていません)

以上の文字がANY CSS2またはCCS3 テキストやフォントプロパティを使用するため、基本的にTEXTです!

として、特定の文字は、彼らがは、先に答えこれらの文字は、「逆規模」メソッドを使用しますので、ピクセル化が、超大型フォントがあるときに、少なくともFirefoxでは、遷移が高価になる、注意してください本当に大きななります中古。中〜大フォントに最適です。

ヒント:このASCIIベースの方法を正しく実現するための位置決めのためにwidth and height propertiesを必要とし、その位置はそうならば壊れていることを使用することができます。

+0

さらに明確にするために、元の寸法を4倍に拡大することが目的だったため、円のサイズの開始寸法は、サイズの4倍または1/4にする必要があります。それが始まりの「0.25のスケール」は、それが1/4の10進数に相当するので実現されると言われています。 – arttronics

+0

私の答えの代わりの円の方法で新しいステータスアップデートをチェックしてください。 – arttronics

関連する問題