CSS - rozmycie tekstu (preserve-3d)

Mon, 18 Mar 2019 14:46:31 +0000

Witam! Mam dwa elementy:

main

transform-style: preserve-3d;
transform: perspective(500px);

sub

transform: translateZ(50px)

Działa to w ten sposób, że element sub jest wysunięty 50px "w strone użytkownika" po osi Z elementu main, a ze względu na działanie perspektywy w elemencie main wydaje się być większy i.. niestety rozmyty.

Owe rozmycie nie działa na grafikę SVG tylko i wyłącznie, jako "rozwiązanie" znalazlem dodanie zoomu do blurowanego elementu, problem w tym że ustawienie dokladnej wartości zoomu aby usunąć rozmycie jest bardzo trudne, a dla ruszających elementów prawie nie możliwe.

Natomiast widzialem na różnych stronach z dobrze ukrytym kodem że napisy na elementach poruszających się po osi Z nie rozmywają się, nawet darmowa biblioteka KUTE.js posiada pewną funkcje która robi coś podobnego.

Jak najprościej naprawić ten blur dla napisów?

Forum Pasja Informatyki - Najnowsze z tagiem preserve-3d

CSS - rozmycie tekstu (preserve-3d)