Skala CSS3() powoduje, że elementy div stają się pikselowane.

Question

Zauważyłem, że podczas animowania CSS3 scale() wydaje się, że pikseluje każdy element, na którym jest używany.

Przykład: http://jsfiddle.net/PD7Vh/2/

W powyższym przykładzie, scale() pixelates środkowy div po najechaniu na niego.

Czy moje ustawienia css są błędne, czy też jest to, co oczywiście robi scale()?

Oto zrzut ekranu z Chrome na Windows 7:

Answer 1

Rozwiązaniem jest rozpoczęcie środkowy okręgu tak duża, jak to powinno być, a następnie przeskalować ją jako punkt wyjścia odniesienia.

Następnie, w zdarzeniu najechania, można skalować do 1, co zachowa niepikapikowane koło środkowe.

referencyjne: jsFiddle

Note inne ustawienia, takie jak pozycjonowanie wykonywane są ze względu na zrekompensowanie tych zmian.

---

status Aktualizacja:
Rozważmy zamiast korzystania border-radius do kręgu, użyj ASCII Character okręgu lub nakreślić koło:

• ○ ☺ ☻ ☼

Dotyczy:jsFiddle (Pozycje zaznaczone nie są skalibrowane.)

Powyższe znaki są zasadniczo TEKST, stąd używać ANY CSS2 lub CCS3 tekst lub właściwość font!

Ponieważ niektóre postacie stają się naprawdę duże robią pikselizacja więc używać „odwrotna skala” metoda dla tych znaków jak wcześniej odpowiedzieli jednak pamiętać, przynajmniej w Firefoksie, przejścia stają się droższe, kiedy bardzo duże czcionki są używany. Działa najlepiej w przypadku średnich i dużych czcionek.

Wskazówka:Ta metoda oparta ASCII mogą potrzebowaćwidth and height properties dla pozycjonowania być realizowane prawidłowo, więc używać, jeżeli pozycjonowanie wydaje złamany.