Wie verhindert man eine Unschärfe durch CSS-Transformation?

Question

Ich habe einige Probleme mit der Zoomfunktion von CSS. Wenn ich ein Element heranzoome, wird es ein wenig verschwommen, obwohl es kein Bild ist, sondern nur ein einfaches Textelement.

Ich verwende den Code von Hover.css, um ein Div in meinem Code zu erstellen. Aber wie Sie auf Hover.css sehen können, wenn Sie Ihre Maus auf "Grow" bewegen, wird es auch ein wenig unscharf.

http://ianlunn.github.io/Hover/

CSS-Code:

.hvr-grow { 
    display: inline-block; 
    vertical-align: middle; 
    -webkit-transform: translateZ(0); 
    transform: translateZ(0); 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -moz-osx-font-smoothing: grayscale; 
    -webkit-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
    -webkit-transition-property: transform; 
    transition-property: transform; 
} 
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active { 
    -webkit-transform: scale(1.1); 
    transform: scale(1.1); 
} 

Wie ist das möglich, das Element wie dieses Beispiel oben zu wachsen, aber alles scharf wie vor machen?

Answer 1

Sie können die Größe des Elements zu erhöhen und geben Sie es Maßstab weniger als 1 solche 0,5, dann erweitern Sie die Skala auf 1 (nicht mehr als 1) auf /focus/active oder jedes Ereignis. Wenn Sie also den Vergrößerungsfaktor vergrößern möchten, sollten Sie die Elementgröße und nicht die Skalierung erhöhen, um einen unscharfen Effekt zu vermeiden. https://jsfiddle.net/qb2Lhtz9/11/

.hvr-grow { 
 
    position: absolute; 
 
    top: 10%; 
 
    left: 10%; 
 
    display: inline-block; 
 
    -webkit-transform: translateZ(0); 
 
    transform: scale(.5) translateZ(0) translateX(-10%) translateY(-10%); 
 
    font-size: 100px; 
 
    -webkit-transition: transform 400ms; 
 
    transition: transform 400ms; 
 
} 
 
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active { 
 
    transform: scale(1) 
 
}

<a href="#" class="hvr-grow">Grow</a>

Answer 2

Haben Sie in Betracht gezogen, das Element standardmäßig kleiner zu skalieren? Dann skaliere es auf 1, wenn es aktiviert/deaktiviert ist?

CSS

.hvr-grow { 
    display: inline-block; 
    vertical-align: middle; 
    -webkit-transform: translateZ(0); 
    transform: translateZ(0); 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -moz-osx-font-smoothing: grayscale; 
    -webkit-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
    -webkit-transition-property: transform; 
    transition-property: transform; 

    -webkit-transform: scale(0.9); 
    transform: scale(0.9); 
} 

.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active { 
    -webkit-transform: scale(1); 
    transform: scale(1); 
} 

Answer 3

Was Sie tun können, wie hier vorgeschlagen, Sie erste Element so groß wie auf schweben machen, skaliert es dann wie transform: scale(.5, .5); zu Anfangsgröße nach unten und dann auf schweben Schalter Skala transform: scale(1, 1);

Sie müssen -webkit-backface-visibility: hidden; backface-visibility: hidden; entfernen und Perspektive (1px) hinzufügen, um so zu skalieren -webkit-transform: perspective(1px) scale(1.1); transform: perspective(1px) scale(1.1); das scheint Unschärfe in Chrom zu beheben. Hier ist ein Beispiel https://jsfiddle.net/qb2Lhtz9/9/ es ist nicht perfekt, aber ich hoffe, es kann helfen ..